Tagged: WooCommerce single product image
Hi
Example go to:
Resize the window to a mobile size and hover the product.
Notice the left and right scroll arrows show up.
These are fairly big.
I would like to make the arrow backgrounds and the arrows themselves smaller on mobil.
What is a good approach?
Thank you.
Hey Silje,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
@media only screen and (max-width: 1439px) {
.single-product .avia-svg-icon svg:first-child,.single-product .avia-svg-icon img[is-svg-img="true"] {
height: .5em;
width: .5em;
}
#top.single-product .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
margin-top: 9px;
}
#top.single-product .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top.single-product .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top.single-product .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
width: 30px;
height: 30px;
line-height: 30px;
}
}
After applying the css, please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
Best regards,
Mike
Thank you Mike! That was very helpful.
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike