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.
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
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
I recently found this answer on SO, and was wondering if there is a syntax to accomplish this with breakpoint-sass plugin? Thanks.
EDIT (since there was confusion):
Have a breakpoint dependent on height and width, similar to this media query from the posted question.
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
Breakpoint allows for media breakpoint and or breakpoints, so constructing this MQ is fairly straight forward:
http://sassmeister.com/gist/3b7127ded8e032d90f4d
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.
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)