How can I adjust the size of my hero banner for mobile and desktop view?

Store Design
, , , ,
1

Hi! I have a problem with my Shopify page I want to adjust the size of my Hero banner image so that it looks different on mobile and desktop. Does anyone know how to do this? Your help would mean a lot!

This are the pages that I want to modify

2

You can use something similar to this code to make your banner keep image proportions:

[class*="__ss_parallax_banner"] {
  height: 90vw;
}

@media (min-width:1024px){
  [class*="__ss_parallax_banner"] {
    height: 60vw;
  }
}

Since the image is full-bleed, using vw units here will mean that “image height should be 90% of its width on mobile and 60% – on desktop”…

The code above should go into “Custom CSS” setting of this section (or in Theme settings).

3

Hi @Angelo20300,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

/* for mobile */
.banner-template--25407105401145__ss_parallax_banner_pepNAK {
      height: 400px;
    }
/* for tablet */
@media (min-width: 768px) {
    .banner-template--25407105401145__ss_parallax_banner_pepNAK {
        height: 560px;
    }
}
/* for desktop */
@media (min-width: 1024px){
    .banner-template--25407105401145__ss_parallax_banner_pepNAK {
        height: 700px;
    }
}
4

Hi @Angelo20300 ,
You can customize your hero banner size for mobile and desktop using responsive CSS — this allows you to control how the image appears on different screen sizes.

Here’s how to do it:

  1. Go to Online Store > Themes.
  2. Click Customize on your active theme.
  3. Open Theme settings > Custom CSS (or go to Edit code > Assets > base.css if your theme doesn’t have a custom CSS box).
  4. Add the following code:
/* Desktop view */
.banner-template--25407105401145__ss_parallax_banner_pepNAK {
  height: 700px; /* Adjust desktop height */
  background-position: center;
  background-size: cover;
}

/* Mobile view */
@media (max-width: 768px) {
.banner-template--25407105401145__ss_parallax_banner_pepNAK {
    height: 400px; /* Adjust mobile height */
    background-position: center;
    background-size: cover;
  }
}

If this helps improve your layout, don’t forget to mark it as an Accepted Solution so others can find it easily!

5

@Angelo20300 you can use css but still it can create issues depending on image, I recommend, to add 2 banners, one for desktop and one for mobile, then using css you can show/hide the banner