Mobile CSS Media Queries: Many people have been writing to ask me about mobile CSS for WordPress and often the best answer I can give without going into an incredible amount of detail is to resize your browser and find the “break points” of your theme. A Break Point is where, in the course of resizing your window (reducing the width of the browsing window), your theme gets misaligned, text doesn’t fit inside your divs, or any other number of potential issues with your code. Specifically, it’s important to note at what pixel width this happens! Today though, how about I provide a permanent explanation that you can refer to and copy from anytime you like?
Once you understand the basic concepts of why this happens and how to fix it, it’s actually rather simple to adjust a WordPress theme for viewing on all devices BEAUTIFULLY and without formatting issues.
Here are the key numbers to keep in mind:
- Super Media Queries: 1368px, 1280px & 1024px: to display well on larger format screens, you may need to utilize these 3 large-format standard pixel widths
- Media Query 1) 960px: most laptops, certainly desktops, & Tablets in Landscape Mode now have at least 960px of screen space to work with inside a browser window, so this is the first media query:
- @media only screen and (max-width:959px)
- we use 959px as the max-width so that every browser window that’s at least 960px wide, will not be affected
- Keep in mind that if you do not define any additional media queries, this query will be used for everything under 960px wide
- Media Query 2) 768px – 959px: Tablets in Portrait Mode typically fall into this category in their browser pixel width.
- @media only screen and (min-width: 768px) and (max-width:959px)
- Note the difference between min-width & max-width calls!
- Media Query 3) less than 767px: hand-held mobile devices are typically all encompassed by this screen limitation.
- @media only screen and (max-width: 767px)
- Media Query 4) 480px – 767px: hand-held mobile landscape to tablet portrait mode
- @media only screen and (min-width: 480px) and (max-width: 767px)
- 480px is typically how much room you have to work with on a cell phone in landscape mode and usually the same settings work for a tablet in portrait mode
- Media Query 5) less than 480px: some cell phones still have fewer pixels, so it’s a good idea to include this setting and a few lines of css to make any necessary adjustments for such devices
- @media only screen and (max-width: 479px)
Now that we have explored the basic meanings of the various media queries for mobile css, here’s a sample of what this would actually look like in your CSS file:
/* COPY EVERYTHING BETWEEN HERE */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
/* CSS Calls go here remember you still have to define your CSS structures inside your Media Queries*/
#main {
width:80%;
margin:0 10%;
etc…
}
etc…
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* CSS Calls go here remember you still have to define your CSS structures inside your Media Queries*/
#main {
width:85%;
margin:0 7.5%;
etc…
}
etc…
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
#main {
width:90%;
margin:0 5%;
etc…
}
etc…
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#main {
width:95%;
margin:0 2.5%;
etc…
}
etc…
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
#main {
width:100%;
margin:0;
etc…
}
etc…
}
/* AND HERE IF YOU WANT TO USE THESE MEDIA QUERIES IN YOUR OWN CSS FILE */
The above code takes a div id called main and over the course of the CSS queries increases it’s width based on the size of the screen it is being viewed on. At the same time it also reduces the right & left margins to complement the new width percentage. The effect this has is that MAIN is first 80% of the screen with 10% right and left margins, then it becomes 85% with 7.5% right and left margins, so on and so forth… so that main takes up enough space to view on devices with small screens without having your screen size being wasted on margins that contain nothing! Eventually on the smallest screen sizes, main takes up 100% of the available screen size. This of course assumes that #main is the the main structure for your page and everything else in contained inside the #main div.
You can copy everything between my UPPERCASE comment tags to your own CSS files to use as a start for your mobile CSS development.
Although I am primarily a WordPress developer, this same code can be used in most platforms and frameworks where you are able to adjust your own CSS files for your mobile sites.
As always, feel free to reach out with comments or questions: Email Me
