I been using queries now for a while and grabbed some pre loaded widths etc depending on what type it will be (Phone, laptop, tablet or even normal screen) and i realized its been using min width and max width and nothing to do with height? So i changed it to max width, max height and now it seems to be conflicting with different screens. So i switched it back to min-width and max width but same issue.
I am completely confused as to how these are meant to be used.. I looked through loads of tutorials and all sorts but i still dont understand correctly. Can someone help me out?
Below is two queries that i put together that conflicts and the reason why i am guessing is due to the max-width being the same?
I changed one to just max-height and still doesnt work so i honestly dont know.
The screen sizes i want to create media queries for is the following:
1280 x 768 and is landscape. I also want to do: 1280 x 720
Media query for screen 1280 x 768:
#media only screen
and (min-width: 768px)
and (max-width: 1280px)
and (orientation: landscape)
{
/*css here*/
}
Code for screen 1280 x 720:
#media only screen
and (min-width: 720px)
and (max-width: 1280px)
and (orientation: landscape)
{
/*css here*/
}
What did i try?
I tried doing the following which failed:
#media only screen
and (max-height: 720px)
and (orientation: landscape)
{
/*Screen 1280 x 720*/
}
#media only screen
and (max-width: 1280px)
and (orientation: landscape)
{
/*Screen 1280 x 768*/
}
What am i doing wrong? I tried matching height by width so max-width: 1280 and max-height: 768 lets say and same for the other res but also no look.. It seems like the screen "1280 x 768" picks up the css for the screen "1280 x 720"
All helps appreciated! Thanks.
Your first rule is contradicting your second rule.
1280px x 768 is the same as w x h. So the height would be 768, not the min-width - but this isn't necessary.
#media only screen
and (min-height: 720px)
and (max-width: 1280px)
and (orientation: landscape)
{
/*css here*/
}
(you could use max-height here)
#media only screen
and (min-height: 768px)
and (max-width: 1280px)
and (orientation: landscape)
{
/*css here*/
}
Some strange reason it was picking up both queries so i just made it work for both by making whatever smaller to fit both no matter what the size was.
Example:
background-color: red;
height: 500px; // I want this for one red and 1200 for another lets say
If i make height 1200 it blows it out of proportion but anyway all i did was lets say, leave it as 300px height and was grand. (Not the best, but ok).
If anyone does have a solution then please do let me know as so far this is the only way and is not the best (obviously) solution due to the fact of using only one media query.
Related
Been doing media Queries for Iframe. This two media queries below works fine for iframe when editing the Height and width
min-device-width: 768px) and(max-device-width: 1024px)
min-device-width: 600px) and (max-device-width: 960px)
However when queries on htc phone it does not do anything with its size..
min-device-width: 360px)and (max-device-width: 640px)
Here is my code
#media screen and (min-width: 360px) and (max-width: 640px),(min-device-width: 360px)and
(max-device-width: 640px) and (orientation : landscape)
{
/* CSS */
.wrap{
width:75%;
}
.iframe {
max-height:30vh;
max-width:30%;
}
.html{
background-color:red;
}
}
even the background colors not working when try to do a troubleshooting
It might be due to the device high-resolution, and thus queries never get triggered. Try specifying the resolution units on your media queries.
Otherwise just use min-height and min-width media queries. They're more reliable.
Below are the media queries i have figured out and i will use as default for every project that i will do.
#media only screen and (min-width : 320px) {}
#media only screen and (min-width : 480px) {}
#media only screen and (min-width : 768px) {}
#media only screen and (min-width : 992px) {}
#media only screen and (min-width : 1200px) {}
Now, the problem i am facing with them is that when i try to change something on 768 it gets changed on 320 also. I want to change for example logo if i hide it on 768 it should only be invisible on 768 only, whereas in this case i have to manually go on each and every query and make it visible.
I have tried min-width also and max-width also.
And min-width for mobile size and max-width for big sizes but with no luck.
And if i use fixed queries then also i have to write code for every query.
So, how do i make it work only for single size and does not affect the others, and most importantly not to write code for every size.
#media screen and (min-width: 480px) and (max-width: 767px) {
// applied only between 767 px and 480px
}
It will, To avoid that you need to write specific for all the resolutions below to that. For example: If you are hiding logo in 768 then it affects 480, 320,. To get rid of that you need to write in 480, that the specific logo to be visible, so that it will be reflected in 320 too.
/* #### CSS that's applied when the viewing area's width is 768px or less #### */
#media screen and (max-width: 768px){
div#logo{
display: none;
}
}
For logo to be visible in 480 and 320 try like this:
#media screen and (max-width: 480){
div#logo{
display: none;
}
}
For more info, Reference link
Best way to apply media query for same width and different heights ?
For example i have this sample code
#media screen and (max-width: 1366px), screen and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
and
#media screen and (max-width: 1366px), screen and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
The problem is, even on 1366 X 657 the article#chapterthankyou{
width:984px;
} style is applied.
How can i accurately apply height width conditions ? Thanks
You are close, but according to this article on the MDN, you are a little off with your logical operators.
For your code, try using this:
#media screen
and (max-width: 1366px)
and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
And...
#media screen
and (max-width: 1366px)
and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
If this still does not work, then refer here for a list of different media queries, which you might find useful.
I have two #media variables in my css thats cause a problem.
One is with smaller width #media only screen and (min-width: 1290px).
And the second one is with greater width #media only screen and (min-width: 1610px), allowing me to display more content.
Now, with my browser window in full screen, and a monitor resolution of 1680 x 1050 pixels, I still cannot get #media only screen and (min-width: 1610px) to appear.
Am I missing something?
Thanks.
Try setting the max-width also for your first condition, as currently both your "min-widths" will be hit when the resolution is > 1610px.
#media only screen and (max-width: 1609px) and (min-width: 1290px){
}
I'm finding the concept of the (min-width/max-width) media query a bit confusing.
Naturally if I was to design a media query I would want to say (in pseudo-code)....
if(screen.width < 420)
{
ApplyStyle();
}
This concept of talking about min and max doesn't make any sense since the 'min-width' of something like a div element is a command not a question.
I know that the following is true when my screen goes below 420px...
#media screen and (max-width:420px) {
}
I just don't know why because the max width is something I tell it to have. If I have told it to have something why is css checking it? Surely it already knows it.
I'm perhaps missing the grammer/context here. Can someone please explain?
min-width in media queries is not related to the min-width property you set on elements, those are two different things.
In media queries min-width: X is true if the viewport has a width greater or equal to X, effectively working as screen.width >= X. Obviously max-width would then be equal to screen.width <= X
To me it makes perfect sense, if you read #media screen and (max-width:420px) as a screen with a maximum width of 420px, so anything from 0 to 420px
Here is a simple example, hopefully it helps..
Say we have a website with the following media queries:
/* #1- Large desktop */
#media (min-width: 980px) { ... }
/* #2- Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* #4- Landscape phones and down */
#media (max-width: 480px) { ... }
If the screen size of the browser is 1200px, query #1 will be satisfied, as the minimum width of the browser has to be 980px for this query to be displayed.
Lets say we resize the browser now, and bring it all the way down to 250px.. query #4 is satisfied as the MAX is 480px..
Here is a simple translation of the queries..
#media (min-width: 980px) { ... }
Display if screen is greater than or equal to 980px
#media (min-width: 768px) and (max-width: 979px) { ... }
Display if screen is greater than or equal to 768px and less than or equal to 978px
#media (max-width: 767px) { ... }
Display if screen is greater than 480px and less than or equal to 767px.
#media (max-width: 480px) { ... }
Display if screen is less than or equal to 480px
Using these queries, you will always have a result, as one query is always satisfied.
The confusion here is that there is both a min-width CSS property and media query with the same name:
#media (min-width: 420px) {...} /* This is read-only and is set to screen size */
.element { min-width: 420px; ...} /* This is setting a property of the selected element */