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

Increasing the size of gallery arrows


Amelia__
Go to solution Solved by tuanphan,

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 post
  • Answers 36
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS .gallery-fullscreen-slideshow-control-btn-icon svg { width: 20px !important; height: 20px !important; }  

https://oleander-pomegranate-ka8f.squarespace.com/?p password: temporarystag Does that do the trick? M  

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <style> @media only screen and ( min-width: 641px ) { #block-yui_3_17_2_1_16048954776

Posted Images

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 post
  • 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 post
  • 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 post
  • 0

Good to know. I was able to adjust the color so I figured I could also adjust the stroke width.

Thanks for your help on the gallery glitch, and I'm sorry we couldn't find a satisfying solution. Good to know there's nothing that can be done about it, tho.

Cheers!
M

Link to post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...