question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update the media queries to mobile first

See original GitHub issue

Issue

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:closed
  • Created 5 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
crysfelcommented, Oct 3, 2018

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.

1reaction
emmabostiancommented, Oct 3, 2018

Sure, I will add you.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found