media queries question

Start with the desktop and work down. I know a lot of folks say go the other way, but believe me my way is easier and more robust.

Once you have a sane layout coded for your content¹, squeeze the browser window until the layout breaks. That's your first (wait for it) breakpoint. Write the css rules you need for the smaller window. You only need to write what's necessary to override the big screen layout. See my recent answer at http://csscreator.com/topic/how-do-i-scale-two-images-simultaneously. To be continued:

cheers,

gary

1. By sane, I mean a layout that is OK from maximized down to somewhat less than 1024px wide; down to 800px would be a Good Thing. At 800px, there is space for two columns of readable width, i.e. a main content column of ~65 character's width and another half that.

See my recent answer at http://csscreator.com/topic/how-do-i-scale-two-images-simultaneously.

In that thread, I made separate style sheets, but you can simply append the overrides to the main stylesheet, like so:

html, body {
    margin: 0;
    padding: 0;
    font: 100%/1.25 sans-serif;
}
 
p {
    font-size: 1em;
}
 
h1 {
    background-color: #ffdd20;
    border: 2px solid #c56500;
    color: #404040;
    display: table;
    margin: 0 auto;
    padding: 0 1.25rem;
}
 
#wrapper {
    margin: 0 auto;
    max-width: 960px;
    width: 95%;
}
 
p#before-after {
    margin-top: 0;
    text-align: center;
}
 
p#before-after img {
    display: inline-block;
    min-width: 320px;
    width: 49%;
}
 
@media (max-width: 680px) {
    p#before-after img {
	/* limit width to natural size max */
	max-width: 480px;
	width: 95%;
    }
}

Now that you have a responsive page to that width, squeeze down again until the layout breaks. Make another set of overrides for another stylesheet or append the rules as before.

It's your layout and content that determine where to set your breakpoints, and the UAs self-select according to their sizes.

cheers,

gary

//edit: Removed duplicate styles that were due to double pasting. ~g

Start with the desktop and work down. I know a lot of folks say go the other way, but believe me my way is easier and more robust.

Thats exactly what i do

Thanks for the demo thats a interesting thread that you shared !

Thanks .