Cannot get mobile view to look correct

[cinderella518]

I posted this once already, but no responses so posted it again. Below is how the mobile view of my store banner looks. Can someone please tell me how to fix it

New banner? - if so how do I get it to display only on mobile view

Edit code? - if so what is the code and a screenshot where to place it.

Is it because I changed my header settings for my logo to show better?

Other people use the same banner for both views I am finding it hard to believe that it's that difficult to fix this but I don't know what else to do. 😔😔

I don't even care if I have to remove the button on the mobile view. I am willing to do that if that's possible.

Thanks in advance!

[tim · Accepted solution]

Try adding this code to the sections "Custom CSS" setting:

.banner__box {
  padding-bottom: 0;
}

@media (max-width:480px){
  .banner__box {
   transform: scale(0.75);
   margin-top: auto;
  }
}

[cinderella518]

Hi Tim,

Sorry is that the image-banner.liquid section and does it get added at the bottom of the page?

Thanks!

[tim]

No, I prefer to use "Custom CSS" setting in Customizer -- when you're configuring your sections in the "online editor" there are settings to select banner image, etc... At the bottom there is a "Custom CSS" entry field.

In my recommendations I try to avoid editing theme code because it will make further theme updates problematic.

Second reason -- these rules apply only to this particular sections and would not affect other areas of the site.

[cinderella518]

thank you, thank you, thank you!