How to fix mobile header issues on a homepage?

Store Design
1

I’m having an issue with my header on my home page www.tinyotters.com (Dawn Theme)

When I view it on desktop or on landscape phone mode, it looks fine (first screen grab below.)

When I view it on portrait mode on a phone, the text and button size doesn’t shrink to match what we’re seeing in the other views, and it gets obstructed by the background image (second screen grab.) Can anyone help me with this so that it’s good on desktop, portrait mobile, and landscape mobile?

tinyotters_0-1668564575110.png
tinyotters_0-1668564575110.png2588×1234 383 KB

tinyotters_1-1668564698907.png
tinyotters_1-1668564698907.png996×1042 163 KB

2

Hello @tinyotters

I would like to give you some recommendations to support you.
You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

Hope my recommendation can works and support for you!
Kind & Best regards!
GemPages

2 Likes
3

I think this worked! Thank you!

1 Like
4

I am glad that my solution is helpful to you :grin: .

5

Thank you