how to make the banner's height smaller on desktop only

Store Design
, , , ,

Topic summary

A user seeks to reduce banner height on desktop while maintaining mobile dimensions. Two solutions are provided:

Solution 1 (BSSCommerce-B2B):

  • Navigate to Admin → Online Store → Theme → Edit code
  • Locate the theme.liquid file
  • Add custom CSS code snippet before closing or tag
  • Uses media query targeting desktop viewports

Solution 2 (Made4uo-Ribe):

  • Access Admin → Online Store → Themes
  • Open main.css (or base.css/style.css) in Assets folder
  • Add CSS at bottom of file:
@media only screen and (min-width: 749px){
  #template--[ID]__section_adaptive_slider .slider__image-adaptive {
    height: 300px;
  }
}

Both approaches use CSS media queries to apply height restrictions exclusively to desktop screens (min-width: 749px). The original poster confirmed the solution worked successfully.

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

Thank you this looks great!