skyguy skyguy - 2 months ago 4
CSS Question

site only shows half screen on mobile? Rest of screen is just body background?

Ok I have a big problem that I don't know how to get around, I have never encountered this before - half my site won't display on mobile. It is cut in half. I have to present this site in a week and haven't tested on mobile until now - I do not know what to do. Here it is:

enter image description here

I have a full size image as that top image, and the text from that is extending over, however I don't know what the problem is. I use a few media selector sin my CSS, but only to change various small things.

I read up on setting

width in CSS - could this be the problem?

Im desperate - how can I fix this?


Ideally, you would have planned for mobile-friendliness. However, a very quick fix to get it not looking terrible is to replace:

<meta name="viewport" content="width=device-width, initial-scale=1">

in the HTML with:

<meta name="viewport" content="width=device-width, initial-scale=0.5">

This will set the screen width to the device width, but not scale the text fully to mobile-friendly sizes, meaning your font will be smaller than it should be, but it will fit. Here's a screenshot:

enter image description here