Oliviamercedes
-
Posts
7 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Oliviamercedes
-
-
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.
-
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.
-
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/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/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?
-
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!!!
Moving the carousel arrows on product page
in Code Blocks
Posted
YAY! thank you so much!! this worked great. and I super appreciate you explaining it as well.