// Current Rule
main {
width: 980px;
margin-left: auto;
margin-right: auto;
}
// Minimum screen-size of Laptop to Desktop
// Override some css rule if needed
@media only screen
and (min-width: 1442px) {
// Override rule here
}
// Medium screen-size
@media only screen
and (max-width: 1068px) {
// My custom breakpoint
// I use one full width to consume space down to mobile landscape view
// Margin will keep gutter intact
main {
width: 692px;
}
}
// Small screen-size
@media only screen
and (max-width: 735px) {
// My custom breakpoint
// Flexible width for mobile
// Margin will keep gutter intact
main {
width: 90%;
}
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.