css - Bootstrap weird behavior on screen width smaller than 480px

Question

I have this website working as expected on desktop and wider devices, however when viewing on screens smaller than about 480px, it looks like the body width gets scaled down.

It gets worse as the screen gets smaller:

Because the CSS is so huge and multiple files get combined, I wouldn't even know what code to post here.

Hopefully someone can find the problem by having a look: http://www.sportbijwillem.nl

I appreciate any help.

Answer 1

There are multiple mistakes:

1. You have commented out width: 100%; of the img with class .badgeback. The Image should have the width: 100%;.
2. .badgehead and .badgetext have fixed width of 390px, which is wider than the viewport. Try giving width in percentage. Like give both width: 100%;
3. .badgehead and .badgetext also have fixed left value left: 249px; which is very very high, thus they push the content out. Try giving them left: 180px;.

Second and Third should only be followed with media queries.