Banner Collection page stop changing size

Store Design
, , ,

Topic summary

A user is experiencing an issue where their collection page banner changes size and crops differently between desktop and mobile views. The current mobile version crops the banner in a way that doesn’t work with their design.

Current Problem:

  • Banner displays at full size on desktop
  • Mobile version shows a cropped/resized version that breaks the design

Desired Outcome:

  • Banner should maintain consistent appearance across both desktop and mobile
  • No cropping or size changes between devices

Proposed Solution:
A CSS fix was provided that involves:

  • Adding custom code to the theme.liquid file
  • Using media queries to control banner image sizing
  • Setting object-fit: contain and height: auto properties for the banner image

The solution was marked as accepted, suggesting it resolved the issue. The discussion includes visual examples showing the current desktop/mobile display and the desired mobile appearance.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
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