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.

Version 11.0.0 causes 'mobile' to activate on normal screen

See original GitHub issue

I just took my (local) apprun-classyui-spa from classy-ui 10.2.1 to 11.0.0 and noticed that the main margin-left was reduced from 2rem to 1rem; margin-right was also shrunk. This is the start of the generated HTML of the div when I do npm start:

<div class="margin-left__SPACE_70 mobile:margin-left__SPACE_40 margin-right__SPACE_40 mobile:margin-right__SPACE_20

The live result (using 11.0.0) can be seen here: The code at is still using classy-ui 10.2.1. Attached is a dump from devtools showing ‘mobile’ active. margins

Issue Analytics

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

github_iconTop GitHub Comments

christianalfonicommented, Apr 1, 2020


Yeah, so this is what is so insanely confusing about media queries. We are now running a max-width strategy, which means that if the width of the screen is less than what the media query states, it is activated. Which means a mobile sized screen is less than all other screens, meaning that their css activates. That said… your test is a little bit weird 😄 It should rather be one button and the color/size/whatever of that button changes based on the screen you are on. That is how media queries really work. It is not to identify the device, it is to override styles based on the size of the window 😄

If we were to identify the exact device, we would have exact media queries, like From 0px - 640px, but the problem with that strategy is that a device can not start where an other device ends.

Imagine mobile 0px - 640px. So Tablet would then have to start at 640px. But that does not really work, cause if mobile ends at 640px and tablet starts at 640px they conflict. Meaning on a tab you would maybe see a mobile version or maybe not, because a mobile style was not defined. It all becomes very confusing.

So media queries is not to identify device, but to override styles based on the size 😄


There is nothing special about devices related to this, cause it is just size of browser, so would have to be like a browser issue?

christianalfonicommented, Mar 29, 2020

Oh, also detected a specificity issue here, that is probably what I experienced and it confused me. Fixing that now 😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

MobileIron Core Device Management Guide
How to get the app GUID for a Windows Phone 8.1 device app ... Translated versions of MobileIron client apps.
Read more >
[ROM][UNOFFICIAL][11.0.0] LineageOS 18.0 [ALPHA][20.10 ...
- Activate screen if there are notifications does not work. When I receive notifications from WhatsApp the screen does not turn on, with...
Read more >
IBM Cognos Analytics Version 11.0 : Administration and ...
Normal logging of all users resumes. It could take up to 30 seconds for the user-specific logging to stop. 22 IBM Cognos Analytics...
Read more >
iPhone 7 home button not working after screen replacement
The phone will act as if it's missing the home button completely. A message will also appear "Touch ID cannot be activated.
Read more >
ETSI TS 122 072 V11.0.0 (2012-10)
Universal Mobile Telecommunications System (UMTS); ... (3GPP TS 22.072 version 11.0.0 Release 11) ... Normal Procedures with successful outcome .
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 Post

No results found

github_iconTop Related Hashnode Post

No results found