Mobile resolution problems

1

This pen looks exactly as I want it to look when I resize the window but when I host it on github pages, the responsiveness doesn’t work on mobile and the fonts become tiny because most smart phone have resolutions of 1080 x 1920 and above. How do I make it look on phones as if the phone has a resolution of 600px.

PS: I can’t share my github page because I’m not allowed links yet but you can download the pen and open it on your phone to recreate the experience.

2

A few suggestions:

  • I don’t think you need a minimum width set on the body. It causes a horizontal scroll bar on both my phone and when I narrow my desktop browser all the way. I think your content should be able to handle widths less than 600px just fine.
  • Using Firefox, go to the View -> Zoom menu and activate ‘Zoom Text Only’. While holding down the Ctrl key, scroll you middle mouse button to increase the text size. You’ll see that a lot of your content breaks as the text size gets bigger. Part of responsiveness is handling larger text sizes that the viewer may be using to look at your page.

I would narrow your browser as far as it will go and fix your styling so that it looks nice. Remember to increase the text size a little as well just to make sure it doesn’t break. Then slowly widen your browser until you find a natural point at which it would make sense to rearrange the elements for a wider viewport. Set your media query break point based on that spot.

3

Screenshot_20200421-202808~2
Screenshot_20200421-202808~21080×1613 229 KB

This is how it shows up on mobile (Firefox on android) with font size of 16px. I have template sites with same font size yet much visible on the same environment, so I don’t understand why?

4

Hey, are you able to add the github link now?

5

Not yet but you can copy the URL from the screenshot.

6

Ahh, thanks, don’t know why I didn’t think of that :slight_smile:

First thing I would do, add the following inside <head>:

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

This helps all the different devices display your page properly. Not going to guarantee this will fix your particular issue, but it should be there nonetheless.