CODEWITHSUNDEEP
htmlcsslayout
clifgray
clifgray

Reputation: 4419

how to prevent webpage layout destruction

I have a webpage with the following layout: http://jsfiddle.net/h9Nn3/6/ and it looks exactly like I want it to as long as the user's browser is wide enough (over 700px or so) but if it is thinner than that it starts to get all jumbled up and if the browser is only half the screen which somewhat normal then it looks terrible. What would the best way to fix this be?

I think the best thing would be if the items simply moved down as opposed to overlapping.

Upvotes: 1

Views: 87

Answers (2)

Blender
Blender

Reputation: 298176

You can use min-width, as @anjunatl pointed out, or you can use CSS3 media queries.

They let you tweak the CSS for any resolution range you want:

body {
  color: red;
}

@media screen and (max-width: 700px) {
  body {
    color: blue;
  }
}

When the user's browser is less than 700px wide, the new CSS is put into effect and overrides the old CSS. You can use this to your advantage and basically fix any bugs you find with the website by adding new rules into the media query block. That way, they only show up and fix the layout at the right resolution.

Upvotes: 4

anjunatl
anjunatl

Reputation: 1057

Add this CSS to the body tag: min-width: 700px;

Upvotes: 3

Related Questions