How to change the height of image banner on mobile device impulse theme

Store Design
,

Topic summary

Issue: In the Impulse theme, the image banner appears correctly on desktop but is too small on mobile. The requester wants to increase the banner height only on mobile.

Proposed fix: Add custom CSS via Online Store > Themes > Edit Code, in the main CSS (e.g., theme.css/base.css). The suggestion sets explicit banner heights and uses a media query:

  • Desktop: .image-banner with a fixed height (e.g., 500px) and object-fit: cover.
  • Mobile: @media (max-width: 749px) targeting .image-banner with a larger mobile height (e.g., 300px) and object-fit: cover.

Update/result: The requester reports the CSS did not work; the banner remains small on mobile. They only want changes applied to mobile, not desktop.

Assets: A mobile screenshot is provided to illustrate the small banner height; it is useful for visual context.

Status: Unresolved/ongoing. Further troubleshooting is needed to make the mobile height change take effect without altering the desktop layout.

Summarized with AI on December 14. AI used: gpt-5.
1

Hello everyone,i use impulse theme so image banner on desktop is good,but in mobile device is small.Can me recommend the right height and to help me to resolve this and to put in the right way.

Screenshot_20241115_000008_Chrome.jpg
Screenshot_20241115_000008_Chrome.jpg1080×2118 201 KB

2

Hi @VisarK ,

To ensure that your image banner displays well on both desktop and mobile in the Impulse theme, you may need to adjust the height for mobile devices while maintaining the design for desktop. You can do this by adding some custom CSS for mobile responsiveness.

Here’s how to adjust the banner height for mobile devices:1. Go to the Theme Code Editor:

  • From your Shopify Admin, navigate to Online Store > Themes.
  • Find your Impulse theme and click on Actions > Edit Code.

  1. Add Custom CSS:

    • Open the Assets folder and find the main CSS file (often named theme.css or base.css).

    • Add the following CSS at the bottom of the file:

/* Desktop Banner Height */
.image-banner {
  height: 500px; /* Adjust the height as needed for desktop */
  object-fit: cover;
}

/* Mobile Banner Height */
@media screen and (max-width: 749px) {
  .image-banner {
    height: 300px; /* Adjust to your desired height on mobile */
    object-fit: cover;
  }
}
    • The .image-banner class targets the banner image. You can adjust the height values for both desktop and mobile to suit your design.

  2. Save and Preview:

    • Save the changes and refresh your store to see the new banner heights applied to both desktop and mobile views.

Adjusting the height values:- For desktop, try a height around 500px (or as you see fit for your design).

  • For mobile, a height of around 300px often works well for a responsive design, but you can adjust it based on your image’s aspect ratio and desired look.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

3

Hi @akshay_bhatt

It doesnt work,still is small height on mobile device,i dont meed to change the height on desktop just in mobile because is small