Different banner heights for PC and mobile users

Store Design
, ,
1

Hi, I can’t figure out how to get different banner heights on different devices. On PC I would like for it to be Adapt to first image and on mobile Large. Any ideas? I’m using Dawn theme.

image
image1920×867 91.6 KB

3

Hi @DoVis7,

In the Dawn theme, there is no built-in option in the theme customizer to set different banner heights for desktop and mobile. However, you can still achieve this by using a CSS media query to target mobile devices specifically.

If you’d like help with this, feel free to let me know I’ll be happy to provide a 100% working CSS snippet for you.

Best regards,

4

Hi @DoVis7,

I checked and you have set this, keep the default size for desktop and mobile will be large size.
What do you want?

5

Hey @DoVis7,
In order to do the requested changes requires to do the custom code in your theme file.
Could you please share the 4 digits collab code along with the store url in the p/m so that I can take a look and make the requested changes.
Thanks

6

Hi! Yes, there’s actually a simple way to set different banner heights for different devices—no coding needed.

Our app, Tapita Theme Section Builder, offers a free Banner section (look for the section named Tpt-Banner) that gives you full control over banner height on desktop, tablet, and mobile. You can adjust each one directly in the Theme Editor (see the reference image I’ve attached).

1 (88)
1 (88)1920×937 98.7 KB

It’s completely free and solves this exact issue. Let me know if you’d like help setting it up!

If this helps, feel free to give it a like. Thanks a lot!! :smiling_face:

-Beta from Tapita Section team

7

Hello @DoVis7

Step 1: Go to your theme code
In Shopify admin, go to Online Store > Themes > Dawn > … > Edit code.

Search for section-image-banner.css or open assets/component-image-banner.css (depending on your version).

Add this at the bottom of the file:

@media screen and (min-width: 750px) {
  .custom-banner {
    height: auto !important;
  }
}

@media screen and (max-width: 749px) {
  .custom-banner {
    height: 500px !important; 
    object-fit: cover;
  }
  .custom-banner img {
    height: 100% !important;
    object-fit: cover;
  }
}
8

Hello @DoVis7

Step 1: Go to your theme code
In Shopify admin, go to Online Store > Themes > Dawn > … > Edit code.

Search for section-image-banner.css or open assets/component-image-banner.css (depending on your version).

Add this at the bottom of the file:

@media screen and (min-width: 750px) {
  .custom-banner {
    height: auto !important;
  }
}

@media screen and (max-width: 749px) {
  .custom-banner {
    height: 500px !important; 
    object-fit: cover;
  }
  .custom-banner img {
    height: 100% !important;
    object-fit: cover;
  }
}