Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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: This is the problem

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
2.4k views
Welcome To Ask or Share your Answers For Others

1 Answer

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

548k questions

547k answers

4 comments

86.3k users

...