Solved

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

goosesummer
Visitor
3 0 0

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. 

Screenshot 2024-03-28 at 4.42.47 PM.png

Screenshot 2024-03-28 at 4.42.58 PM.png

 

Thank you 

 

goosesummer.com 

Accepted Solution (1)
AnneLuo
Shopify Partner
211 44 50

This is an 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>

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on luomingxia@shinetechsoftware.com.

View solution in original post

Replies 4 (4)

AnneLuo
Shopify Partner
211 44 50

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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on luomingxia@shinetechsoftware.com.
goosesummer
Visitor
3 0 0

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
Visitor
3 0 0

@AnneLuo 

I forgot to add a photo of the issue 

Screenshot 2024-03-28 at 5.36.53 PM.png

AnneLuo
Shopify Partner
211 44 50

This is an 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>

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on luomingxia@shinetechsoftware.com.