Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Increasing the size of gallery arrows


Amelia__

Question

Site URL: https://clementine-sunflower-4f33.squarespace.com/

Hello Squarespace Forum!

I would really appreciate if someone could please help me make the arrows on my slideshow gallery bigger. At the moment they are quite small and not very obvious.

I've tried the CSS from a couple of blogs that I have read but it doesn't seem to make any difference.

I'm not sure if this CSS that I have used for the descriptions on the gallery are interfering with the code? I used the CSS from this article and put the Javascript into a Markdown block in the footer: 

The site is using version 7.1.

Thanks!

Amelia
 

 

Screen Shot 2020-05-20 at 4.17.01 PM.png

Link to comment

Recommended Posts

  • 0

I'm trying to alter the recent bit of code you provided for the gallery arrow size, and I managed to resize them and change the color, but I'm struggling to get the width to change.

I tried things like:
width: var( 5px );
--and--
width: var( 150% );
--and--
width: 5px;
--and--
width: 150%;

but none of it seemed to change the stroke. What am I doing wrong?


I'm going to try and strip the site down and troubleshoot tomorrow.

Link to comment
  • 0

UPDATED UPDATE:

I stripped out all the code and took the problem to SS Live Chat Help. Turns out that the problem is on SS's side of things, it's a bug they're trying to fix. The temporary solution they offered was having me use a Summary Block carousel, but I think that will potentially conflict with the Summary Block carousel I was using for testimonials.

Just in case, is there a way to apply L/R arrow styling of the existing Gallery Block Carousel to a Summary Block Carousel?

That way, I could potentially switch it over and get a plug-in for the Testimonial section I'll need.

Thanks for all the help!
Michael

Edited by MichaelG_2001
Link to comment
  • 0
13 hours ago, MichaelG_2001 said:

I tried things like:
width: var( 5px );
--and--
width: var( 150% );
--and--
width: 5px;
--and--
width: 150%;

You want to change the value of line...

--controls-size: 32px;

The original value in SS code I think was 24px;

I've updated my previous code with a comment to help out. And the comment about the borg is just a heads up that if you change values there, things may break.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@tuanphan  Hi Tuan!  I used your awesome CSS for creating Carousel Arrows on my Mobile View.  This is the code is used...

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

1.  I'd like to make those arrows slightly bigger and thicker.  Ideas?

2. I'd like to have the same arrows on my desktop view as well.  Is there a CSS for that too?

 

joeystephensmusic.com

 

Thanks!

Joey

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...