Adjusting the spacing on image banner for mobile view only - Dawn Theme

[goosesummer]

Hi! 

I noticed that on mobile view, my image banner text is overlapping with my logo and also with a product photo. It is fine on desktop view, but on mobile view it is bad. I might have done some coding that affected this in the past, but I can't seem to figure out what the problem is. 

 

 

Thank you 

goosesummer.com 

[AnneLuo]

Hello, @goosesummer 
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

<style>
  @media (max-width: 749px) {
    .product__media-wrappe {
      overflow: hidden !important;
    }

    .banner {
      min-height: 45rem;
    }
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[goosesummer]

Thank you @AnneLuo 

That moved the text on the image banner down so that it is legible, but I would prefer it to be moved down a little further.

Also it didn't adjust the featured product, that still has an image covering the text. 

Thank you

Goose Summer 

[goosesummer]

@AnneLuo 

I forgot to add a photo of the issue 

[AnneLuo · Accepted solution]

Hi, @goosesummer 

If so, you should change the code like this

<style>
  @media (max-width: 749px) {
    .product__media-wrapper {
      overflow: hidden !important;
    }

    .banner {
      min-height: 50rem;
    }
  }
</style>