Goal: adjust a Shopify slideshow’s height differently for mobile and desktop.
What’s been done: The poster achieved the desired mobile look by manually setting padding-bottom: 385px on the class .hero-natural-mobile–template–17760203178306__6d58c228-e01a-45ae-ac59-d52f696909a3, but doesn’t know how to implement this change in the theme code. A store preview link is provided.
Proposed guidance: A reply advises going to Online Store → Theme → Edit code, opening theme.liquid, and pasting a code snippet before . However, the code block in the reply is empty, so no actual CSS/JS was provided.
Key technical context:
Media importance: The attached images (mobile and desktop desired vs. current) are central to understanding the target appearance.
Status: Unresolved. Next steps require a proper code snippet (e.g., CSS in theme files with mobile/desktop media queries) to implement the padding change and define desktop sizing.
hey, I want to change the size of my slideshow, so that it looks like this on mobile:
Instead of this:
and on desktop I want it to look like this
instead of this:
I managed to change it on mobile by editing padding-bottom to 385 px for .hero-natural-mobile–template–17760203178306__6d58c228-e01a-45ae-ac59-d52f696909a3
but i don’t know hot to implement it in the code
store link: https://8c2dd1-3.myshopify.com/
Hello @sondreskskfsghj ,
You can follow these steps:
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team