Custom CSS Media Queries with Breakpoints : Content First

// 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; padding-left: 57px; padding-right: 57px; } } // 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%; padding-left: 0; padding-right: 0; } } // Small screen-size: Portrait // Override some css rule if needed @media only screen and (max-width: 414px) { // Override rule here }

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.