Keep the Banner height on desktop medium but for mobile small

Store Design
, ,

Topic summary

A user seeks to maintain a medium banner height on desktop collection pages while reducing it to small on mobile devices.

Proposed Solution:

  • Access the theme code via Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Insert custom CSS before the </body> tag

CSS Approach:
The solution uses a media query targeting screens up to 749px width to adjust the .banner--medium class, setting a minimum height of 28rem for the banner content on mobile devices.

Status: The response appears to be marked as an accepted solution, though the code snippet in the conversation contains some formatting irregularities that may need verification during implementation.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi, how can I keep the Banner height on desktop (collection page/ hoodies) medium but for mobile small?

URL: https://matibrnd.com/

Pass: biangu

MT27_0-1706795389030.png
MT27_0-1706795389030.png1868×771 139 KB

2

For Mobile

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 (max-width: 749px) .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content { min-height: 28rem; } }

techlyser_web_0-1706805604331.png
techlyser_web_0-1706805604331.png191×231 39.5 KB

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