rufus rufus - 29 days ago 21
CSS Question

Scaling website for widescreens

Im just in the process of finishing off my first site, on my 13inch macbook it looks good along with mobile devices. I have set my media queries to help with the responsive side of things and it seems to be working well. My main issue is on wide screens such as iMacs and especially 27" iMacs everything stretches to use the full width of the screen as it should i guess as i have set most things in percentages. Just wondered the best way to get the site to look better on wider screens, should i use a media query that zooms in when the device width is say above 1500px? or what i be better off putting a wrapper round the whole body that kicks in on larger device screens?

Thanks everyone

Answer

A first step is to put the whole thing (or just the content section) into a wrapper div for which you define

.content_wrapper {
  width: 100%; /* full width on screens up to 1440px */
  max-width: 1440px; /* content width limited to 1440 on large screens */
  margin: 0 auto; /* centers the container on screens above 1440 */
}