How can I get the image banner to expand downwards on mobile?

Store Design
,

Topic summary

A user seeks help making an image banner expand to cover the full page height on mobile devices for their store at et-tani.com.

Proposed Solution:

  • Add custom CSS code to the bottom of the base.css file
  • Access via: Online store > Themes > Edit code
  • The CSS targets banner elements with a media query for mobile viewports (max-width: 749px)
  • Sets banner height to 100vh (full viewport height) using !important to override existing styles

Status: The discussion appears to have a technical solution provided, though the code snippet in the response is partially corrupted/reversed, which may require clarification for proper implementation.

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

On mobile, how could i get the image banner to expand downwards and cover the whole page? basically to extend the size of the page downwards - store is et-tani.com

ym1999_0-1699451769683.png
ym1999_0-1699451769683.png841×1222 141 KB

thanks in advance

2

Hi @ym1999

You can do that by adding this code at the bottom of base.css file in Online store > Themes > Edit code

@media screen and (max-width: 749px) {
.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media {
    height: 100vh !important;
}
}