COLMAR ACADEMY CAPSTONE PROJECT mobile screen not fitting the screen

I’ve just finished my website from scratch and looks nice in a desktop but it doesn’t fit the screen in a mobile phone.
I toggled to small device view in devtools but still can’t find the bug.

Here is the web on github pages:

Here’s the code in a gist:
capstone colmar

Does anybody have a clue what’s wrong?

Perhaps the font size is too big.


Thanks mate, I’ll be fixing that and updating the website. It isthe same thing my brother told me, and he is an experienced programmer but he don’t have a clue of HTML either CSS…
But the problem seems to be somewhere else…
Anybody find the problem? I just can’t…

My thoughts:

  1. make sure you use border-box box-sizing (I can’t see it in your styles and have no access to your reset.css)
  2. look at line 157 and 204 in styles.css - because of your left and right margins both and elements overflow their parent container on the right. I bet if you set up left/right margins to 0 and play with padding settings, there will be no overflowing content of container and the website will fit the mobile phone screen.
1 Like

Thank you very much, seems that the border-sizing : border-box solved the problem! At least it does in my small screen old Iphone 5.

1 Like