Banner Collection page stop changing size

Store Design
, , ,
1

Hey, how are you?

I need the banner on my product page not to change sizes between desktop and mobile, i need them to look the same in both since tha banner we designed doesn’t work on the cropped mobile version. Here is how its working now:

indahood_0-1713466706472.jpeg
indahood_0-1713466706472.jpeg1900×915 69.8 KB

indahood_1-1713466744508.jpeg
indahood_1-1713466744508.jpeg481×855 37.4 KB

and here is a simulation of how I would like to make it look on mobile:

indahood_2-1713466793873.png
indahood_2-1713466793873.png675×633 111 KB

The website is: https://www.proteicodamansao.com.br/
The password is: proteico@toguro

Thanks in advance.

2

Hello @indahood

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 480px){ .banner img { height: auto !important; object-fit: contain !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like