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.

Feature: Responsive styles whitelist mobile

See original GitHub issue

Is your feature request related to a problem? Please describe. I wish I could just whitelist mobile instead of blacklisting the rest of the devices while I use the responsive prop.

Describe the solution you’d like If we would explicitly pass just one argument to the array of responsive styles it would mean that we want to apply this value only to the smallest breakpoint, eg: we got 3 breakpoints [mobile, tablet, PC] and we want to display hamburger menu only for mobile, instead of doing

display: ["block", "none", "none"]

we could do:

display: ["block"]

in the CSS media queries, the equivalent would be using:

@media only screen and (max-width: <mobile>)

Let me know what you think 😃

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
jxnblkcommented, Apr 21, 2020

Generally speaking the responsive array is meant to be “mobile first” (see https://styled-system.com/guides/array-props for some background). You might find the @theme-ui/match-media package to be a better fit for conditionally showing and hiding elements based on viewport width. I’d be open for more hooks-based APIs to explore your use-case, but I don’t think it would be a good idea to overload the responsive array values with max-width media queries

0reactions
lachlanjccommented, Dec 6, 2020

Closing since we’re not planning to implement.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Responsive web design basics
Take a look at our complete course on Responsive Web Design—Learn Design. The use of mobile devices to surf the web continues to...
Read more >
Implementing Application Feature Content Using Remote URLs
Use a whitelist if you allow a remote URL application feature to access container services and you want to restrict the list of...
Read more >
What's New in Bootstrap 5 - SitePoint
It allows developers to easily use beautiful styles and components and create responsive websites. Using Bootstrap can save developers time, ...
Read more >
Responsive design - Learn web development | MDN
It encompasses a number of CSS and HTML features and techniques and is ... A layout with two columns squashed into a mobile...
Read more >
styled-system - npm
Responsive, theme-based style props for building design systems with ... All core function props accept arrays as values for mobile-first responsive styles.
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