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:
https://cblastor.github.io/capstone-colmar/

Here’s the code in a gist:
capstone colmar

Does anybody have a clue what’s wrong?

Perhaps the font size is too big.

2 Likes

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 img.mobile and div.info-pannel elements overflow their parent container div.info 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 div.info 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