I've got following media-queries rules:
#media only screen and (max-width: 854px), only screen and
(max-device-width: 854px) (for devices <= 854px)
#media only screen and (min-width: 855px), only screen and
(min-device-width: 855px) (for devices > 854px)
It's strange but Chrome (and may be other browsers) use this rules at the same time (when width is 800px for example) (check screen). What's wrong?
They are falling back to the same rule because you are using device-width, the condition for device-width targets your device's physical width so if that condition is satisfied then that's the only rule that will be applied (regardless if you resize your browser to any width). Remove both the device-width conditions from your media queries, this should solve your issue.
To learn more about the difference between device-width and width, refer to this link: http://www.w3.org/TR/css3-mediaqueries/#media1
Thank you, Suvi.
I was testing media-query rules by changing width of browser (not by changing screen resolution). Because my browser width was less then 854px following rule was applied - #media only screen and (max-width: 854px). Because my screen resolution was more then 854px following rule was applied - only screen and (min-device-width: 855px)
Related
High all.
I have a site that works ok on MOST devices.
However, I'm having a problem with resizing when the screen is for an iPhone 13 mini.
I have the screen size set at 650X1315.
All is fine until the phone is in horizontal. At this point my css fails to do anything.
I have:
#media screen and (max-width: 650px) and (orientation:landscape)
I've tried changing lots of properties, but neither the div form will increase to contain the textarea, or will the textarea reduce to stay within the form div.
I've tried MANY css rules but nothing works for me in
#media screen and (max-width: 650px) and (orientation:landscape)
Everything else works with width fit-content
Can anyone suggest anything please?
I've included an image to show this.
try to add text-area: max-width:80%
also try to use other simulation's tools for iPhone
may it has bug
This question is a bit dumb but, for a long time I was confused about this. When we use max-width in the media query, does it apply to the current width, or does it apply to the longest possible width.
For example, we know that IPhone 4 is 320 x 480, if I want my query to apply only to the vertical view, then should I use max-width: 320 or should I use max-width: 480
That will depend upon whether the browser is in portrait mode or landscape mode. This can also be locked, based upon the answers to a previous question: How do I lock the orientation to portrait mode in a iPhone Web Application?
The width refers to the width of the current orientation.
In portrait view the width is smaller than the height. In landscape the height is smaller than the width.
When you goal is to have a layout for portrait mode then you should focus on that and not the width.
#media all and (orientation: portrait) { ... }
The container class is used to restrict content to 70% of screen width. Works wonderfully for our app on medium and larger containers.
Unfortunately, we then want 100% spacing on small. Anyone have ideas?
In my code I just do something like this
#media screen and (max-width: the size you need)
.container
width: 98%
I just call this after importing the materializecss sass and override the default behavior
Here is the code they use and which you have to override: link
What is the purpose of using #media screen?
I'm new to using #media queries and I don't understand as to why you would need screen.
#media print I can understand as it allows you to alter the code when it comes to printing a page but surely screen would just give the same output as using standard css? e.g.:
#media screen { #id {display:none; } }
vs
#id {display:none; }
Surely you would just get the same output so what would be the benefit of screen?
Is there another benefit to it that I don't understand?
This will not match when the current media is not screen, e.g. when printing or projecting.
You are assuming that screen is the default, and all the others are exceptions, overriding with more specific rules, but the actual default is #media all.
I am playing with the new bootstrap, i use a pull-right on my menu, but when im on mobile + tablet ress i dont want it to use the pull-right, is there a way to fix this?
You could use media queries for this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. Use media queries to reset or overwrite the default style.
In the case of .pull-right you use this to reset the floating right:
#media (max-width: 767px) { .pull-right{float:none !important;} }
Of course you could vary the max-width to fit your need. B.e. use 991px for phone and tablets.