Media Queries Code Snippet

#css #codenewbie #beginners

MQs - Media Queries

Media Queries are the bee's knees when coding responsive websites. As you may know, determining the best breakpoint for your site isn't an exact science but there are a few MQs I use for every site that I make. When setting up scss/css files I always set these MQs at the bottom of the file in anticipation that I'll be using them as the project moves along:

// MD devices (tablets, 768px and up)
@media (min-width: 768px) { }

// LG devices (desktops, 1024px and up)
@media (min-width: 1024px) { }

// XL devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }

// XXL devices (large desktops, 1500px and up)
@media (min-width: 1500px) { }

A few things to note here:

I always write code beginning at the mobile size and then gradually moving to XXL screen sizes. This is why you won't see any (max-width: ####) on this code snippet.
As I mentioned earlier determining the breakpoint for your website is not an exact science. Do not be beholden to this snippet. Adjust as needed. Never be afraid to experiment to get the results that you need.

For more on media queries check out this article: Media Query CSS Tutorial

I hope this helped :)