Home page photo ok on PC, but not on mobile

[WYSI RICH]

Hello there,

I have a pilates site with a photo on the index page that looks ok. But the photo (and text) don't fit correctly when viewed from a mobile phone.

The site is chrisfraserpilates.co.uk

and the example files are here:
https://1drv.ms/f/s!AtITHoM8v8pmgvAYpRs ... w?e=k5EvlI

Thanks in advance

Rich

[WYSI RICH]

So the website isn't even displaying correctly on my PC now...

Preview in WB looks okay though...

Hope page should look like this:

[Pablo]

There is a lot of content, so where exactly do I need to look to see the issue?

[WYSI RICH]

HI Pablo,

Sorry for all the content!

It's the photo on the home page at the top.
On a PC this shows 4 teachers in a row, with text saying 'Pilates classes in Sheffield' and underneath that 'Welcome to Chris Fraser Pilates etc....."

But on a mobile phone, the photo doesn't shrink down enough, so only two of the teachers can be seen. Also, the smaller text shrinks down to a single word per line (so it's very long and thin top to bottom).

Hope that all makes sense and I'm explaining it okay.

Thanks in advance,

Rich

[WYSI RICH]

Hello again,

Just noticed that the 'GET IN TOUCH' button also drops down, so that it's in front of the text that says 'WHAT IS PILATES'

Thanks again,

Rich

[Pablo]

The reason why the image behaves this way is because the background is set to 'cover' and the height of the layout grid to '100vh'.
So, the image will clipped be 'portrait' size.

[WYSI RICH]

Ahh okay,

So instead of 'cover', I'll try 'contain'
...and maybe 'auto' instead of '100vh'

I'll see where that takes me!

Thanks Pablo!

Rich