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 issueI 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: https://apprun-classyui-spa.surge.sh/
The code at https://github.com/jkleiser/apprun-classyui-spa is still using classy-ui 10.2.1.
Attached is a dump from devtools showing ‘mobile’ active.
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
(1)
Yeah, so this is what is so insanely confusing about media queries. We are now running a
max-widthstrategy, 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 😄
(2)
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?
Oh, also detected a specificity issue here, that is probably what I experienced and it confused me. Fixing that now 😄