Update the media queries to mobile first
See original GitHub issueIssue
ZenHub Issue
We have defined some utilities to deal with media queries, under theme/base/_mediaquesries.scss
file we have a mixing that defines several sizes.
Update the mixin
to be mobile first. Take a look at this tutorial if need some help: https://zellwk.com/blog/how-to-write-mobile-first-css/
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
How To Write Mobile-first CSS | Zell Liew
This approach uses min-width media queries. In the example above, <body> will have a red background below 600px.
Read more >How to Take the Right Approach to Responsive Web Design
Mobile -first is when we start by writing our CSS for mobile devices and then use media queries to add in styling for...
Read more >Responsive Web Design Media Queries - W3Schools
Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller...
Read more >How to use media queries in a mobile-first approach in HTML
Mobile -first approach: In this approach, the existing CSS is for the mobile view then you overwrite the existing CSS using media queries...
Read more >Mobile first - Progressive web apps (PWAs) | MDN
This article provides a guide to implementing a website layout that follows the principle of mobile first. This means creating a layout ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I don’t think there will be a lot of css updates coming up in the next few days. But I will make sure to request mobile first css in PRs.
Sure, I will add you.