Banner smaller but not on the phone.

Store Design
,

Topic summary

A user wants to reduce their banner height on desktop while keeping the mobile version unchanged. They provided their current CSS code, which sets the desktop banner height to 900px.

Proposed Solution:

  • Reduce the .banner__media.media height from 900px to 600px within the desktop media query (min-width: 1024px)
  • Add a mobile media query (max-width: 1023px) to ensure the banner maintains full height on smaller screens
  • Keep existing border-radius and layout properties intact

Key Technical Details:

  • The solution uses CSS media queries to target different screen sizes
  • Desktop changes apply at 1024px and above
  • Mobile styling preserves the original appearance below 1024px

The discussion appears resolved with a working CSS solution provided.

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

Hello.

My Website: https://026624-b9.myshopify.com/

Password: skabig

You will see that the banner is big. I want the banner to be smalleron the desktop like in this picture but on phone it should stay like this:

Screenshot 2025-01-08 150042.png
Screenshot 2025-01-08 150042.png1883×853 191 KB

This is right now the css code for the banner. Thank you for your help :heart:

.banner .banner__media:nth-child(1) {
  border-radius: 20px 20px 0px 0px !important;
}
.content-container {
  border-radius: 0px 0px 20px 20px !important;
}
@media screen and (min-width: 1024px) {
  div.banner.banner--content-align-center {
    flex-direction: column !important;
  }
  .banner__media.media {
    position: relative !important;
    height: 900px;
  }
}
.banner__box.content-container {
  width: 100%;
  max-width: 100%;
} 
1 Like
2

Hey @BudwigUser ,

To achieve your goal of resizing the banner on desktop while keeping it the same on mobile, you can adjust the height of the banner for larger screens and also make the content responsive. Here’s how you can modify your existing CSS to achieve this:

  1. Make the banner smaller on desktop by adjusting the height and ensuring that the media query for desktop (min-width: 1024px) works as expected.

  2. Keep the banner as is on mobile (i.e., no changes to height on mobile).

Here’s an updated version of your CSS:

.banner .banner__media:nth-child(1) {
  border-radius: 20px 20px 0px 0px !important;
}

.content-container {
  border-radius: 0px 0px 20px 20px !important;
}

/* Desktop adjustments */
@media screen and (min-width: 1024px) {
  div.banner.banner--content-align-center {
    flex-direction: column !important;
  }

  .banner__media.media {
    position: relative !important;
    height: 600px; /* Smaller height on desktop */
  }

  .banner__box.content-container {
    width: 100%;
    max-width: 100%;
  }
}

/* Mobile adjustments (no changes needed here) */
@media screen and (max-width: 1023px) {
  .banner__media.media {
    height: 100%; /* Ensure the image height is full on mobile */
  }
}

This will resize the banner for desktop screens and leave it as it is on mobile devices. Let me know if you need further adjustments! :heart:

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

1 Like