Mobile Banner Issues - Logo is overlapping banner text that I am not using for the header

Mobile Banner Issues - Logo is overlapping banner text that I am not using for the header

JMD1411
Shopify Partner
22 0 3

Hi, I've made some edits to the Trade theme code so I can have it like it looks on desktop currently but the way this has been now set up... on mobile this has caused the following issue as you can see in the image. Ideally I need some extra padding above the text only but this can't be done in the section editor.

 

Only way i've been able to fix it is by hiding the logo on mobile - but i want the mobile on logo ... so any ideas?

 

Thanks - added images for context.

 

Screenshot 2024-06-08 at 14.29.07.pngScreenshot 2024-06-08 at 14.29.20.pngScreenshot 2024-06-08 at 14.30.30.png

Replies 4 (4)

PageFly-Noah
Shopify Partner
1317 233 268

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JMD1411
Shopify Partner
22 0 3
PageFly-Noah
Shopify Partner
1317 233 268

 Hi @JMD1411  Iam so sorry, I lost my message so I didn't reply to you early. Here is the solution you can try it. Please paste this code into the theme.liquid file and above the </body> tag:

 

<style>
 @media screen and (max-width: 767px){
  #Banner-template--17683385385207__image_banner .banner__content{
        min-height: 55rem !important; 
  }
}
</style>

 

Hope my solution will help you resolve the issue.


Thank you so much. 

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JMD1411
Shopify Partner
22 0 3

Thanks so much - does the job!! Although the logo seem slightly off center, any idea what could fix that ?