3 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Have a look at the media query rule below :

@media only screen and (min-width : 992px) and (max-width : 1278px) {
 
    }

also

@media only screen and (max-width : 992px) {
 
    }

considering that i have the above media query, should my next media query start frim 992 or 993 ?? I.E.

@media only screen and (min-width : 992px) and (max-width : 1278px) {
 
    }

is the above correct or should i change it to 993 ?

Thank you.

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Start with the desktop and

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 content1, 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.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

See my recent answer at

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks for the example gary

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 Laughing out loud

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

Thanks .