Why isn't my mobile header image resizing correctly?

Store Design
1

Hi there - my header looks pretty good on my desktop and when the phone is turned landscape mode (1ST screenshot), but when it’s in portrait mode, the image doesn’t resize (2ND screenshot.) The buttons are fine but the kid’s head gets cut. Any thoughts as to how to fix it? www.tinyotters.com

tinyotters_1-1668573304945.png
tinyotters_1-1668573304945.png1988×1244 343 KB

tinyotters_0-1668573230194.png
tinyotters_0-1668573230194.png834×1078 686 KB

2

Hello @tinyotters

I would like to give you some recommendations to support you
This image doesn’t resize on mobile devices because it is a cover image. In this case, you can upload another image with the size that prefers with mobile to the File:

GemPages_0-1668574945213.png
GemPages_0-1668574945213.png679×937 29.5 KB

After that, follow these steps:

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

*Let’s replace the URL with your image URL

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

3

@tinyotters - use 2 separate banners, 1 for desk and 1 for mobile.. then using css we can hide/how the one we want

4

I suggest the new code: