Moving the carousel arrows on product page

v7.1  Currently, my product pages display the images with the carousel arrows on each side, sometimes overlapping with the image and making it look awkward. I would like to move these arrows to the bottom center to ensure they do not overlap with the image. I have tried various ccs without success. Product page display is set up in "simple." I have code in there already to change the arrow color, not sure if this is somehow interfering (I am a total newb at code).

website page: https://www.oliviamercedes.com/artwork/p/comprendida

password: tortuguita

thank you in advance!!!

Add to Design > Custom CSS

.ProductItem-gallery-carousel-controls.enable-on-first-image-load.enabled {
    top: unset !important;
    transform: unset !important;
    bottom: -50px;
}

.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-color: black !important;
}

.ProductItem-gallery-slides, section.ProductItem-gallery {
    overflow: visible !important;
}

On 3/10/2023 at 2:32 AM, tuanphan said:

Add to Design > Custom CSS

.ProductItem-gallery-carousel-controls.enable-on-first-image-load.enabled {
    top: unset !important;
    transform: unset !important;
    bottom: -50px;
}

.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-color: black !important;
}

.ProductItem-gallery-slides, section.ProductItem-gallery {
    overflow: visible !important;
}

 

thank you for replying! this successfully moved the arrows down, but now the images are weirdly stacking on each other to the left when you navigate through them 😞 any suggestions?

On 3/15/2023 at 9:38 AM, Oliviamercedes said:

thank you for replying! this successfully moved the arrows down, but now the images are weirdly stacking on each other to the left when you navigate through them 😞 any suggestions?

 

Hi,

You can remove the code, we will check it again

On 3/18/2023 at 7:34 AM, tuanphan said:

Hi,

You can remove the code, we will check it again

Okay i have removed it 🙂

On 3/19/2023 at 11:47 PM, Oliviamercedes said:

Okay i have removed it 🙂

Add this new CSS code

.ProductItem-gallery-carousel-controls {
    top: unset !important;
    transform: unset !important;
    bottom: 50px !important;
}
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-color: black !important;
}

9 hours ago, tuanphan said:

Add this new CSS code

.ProductItem-gallery-carousel-controls {
    top: unset !important;
    transform: unset !important;
    bottom: 50px !important;
}
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-color: black !important;
}

 

So close! the images no longer stack up, but the arrows are still not at the bottom of the verticle images. I noticed that changing the 50px to a lower number moved the arrows lower, but even at 0px they look like this (see screenshot). It'd also be great to have them centered together at the bottom instead of wide apart, maybe that is easier to achieve? Thank you again!! I have removed the code again like last time. 

On 3/22/2023 at 12:30 AM, Oliviamercedes said:

So close! the images no longer stack up, but the arrows are still not at the bottom of the verticle images. I noticed that changing the 50px to a lower number moved the arrows lower, but even at 0px they look like this (see screenshot). It'd also be great to have them centered together at the bottom instead of wide apart, maybe that is easier to achieve? Thank you again!! I have removed the code again like last time. 

You can use negative value, eg: -50px

On 3/25/2023 at 1:05 AM, tuanphan said:

You can use negative value, eg: -50px

great point! unfortunately, there seems to be a cutoff margin, as i decrease the value the arrows move lower but then begin to disappear once they are finally nearing the bottom of the image. in the screenshot i have the padding set to -30 and you can see just the tips of the arrows.

.ProductItem-gallery-carousel-controls {
    justify-content: center;
    height: 100%;
    align-items: end;
}

.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-slides {
	padding-bottom: 50px;
}

try this. without any other previous mods. 

25 minutes ago, Vicks said:

.ProductItem-gallery-carousel-controls {
    justify-content: center;
    height: 100%;
    align-items: end;
}

.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-slides {
	padding-bottom: 50px;
}

try this. without any other previous mods. 

Yes! this worked great! However, when i switch to mobile view I am back to square one haha. the mobile view seems to not respond to changing the value of padding either. any ideas for this? attached is a screenshot.

1 hour ago, Vicks said:

@media screen and (max-width: 767px){
  .ProductItem-gallery-carousel-controls {
    height: calc(100% + 70px);
  }
}

add this line below my previous code.. its basically directing the slider to have the 100% height of its images, and using CSS calc function to add 70px more to it. And we are only doing it for mobile screen with width smaller than 767px. (this 767 is pre-defined breakpoint in squarespace to alter appearance)

YAY! thank you so much!! this worked great. and I super appreciate you explaining it as well. 

Glad I could help. Cheers!