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

1 Like
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;
    }
}