This is my media query for resolution with width of 1280 pixels:
#media (min-width: 1270px) and (max-width: 1280px)
When I want to use seperate query for height like this:
#media (min-width: 1270px) and (max-height: 960px)
It doesn't work. It's not showing even in the developer tools in chrome. Can I get some suggestions?
you need to add a comma between different conditions (width/height)
#media screen and (min-width: 1270px), screen and (max-height: 960px )
https://jsfiddle.net/ahmadabdul3/fxaknLn7/
You must add this code at first
<meta name="viewport" content="width=device-width" />
and use this link
https://css-tricks.com/logic-in-media-queries/
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
Related
I have written this media query for Macbook Pro. It is not accepting the media query. My Macbook's resolution is 1280x800 13 inches
#media only screen
and (min-device-width : 1280px)
and (max-device-width : 800px)
{
.col-md-12.webtestingsocial
{
margin-left: 29px !important;
}
}
It should work this way:
#media screen and (min-width: 800px) and (max-width: 1200px) {
/* Your Styles */
}
Also make sure you have this tag inside the HEAD
<meta name="viewport" content="width=device-width, initial-scale=1">
I think it's because making your min-device-width value higher than your max-device-width makes it invalid.
Have you tried making the min-device-width 800px and max-device-width 1200px?
Media Query for macbook 13 inches(1280*800)
#media screen and (min-width: 800px) and (max-width: 1281px)
{
//write your styles here
}
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.
i'm trying to make menu to be position: fixed; when the browser width and height minimum or bigger than 1024/960 but for some reason when i'm resizing the screen height to more than 960 it doesn't work
here is the code i'm using:
#media (min-width: 1024px) and (min-height: 960px) {
...
}
i'm new to the #media any help would be appreciated!
have you looked at this answer?
with media queries you should use some kind of meta tag.
also, try these meta tags:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
<meta name="viewport" content="width=device-width"/>
and try using
#media screen and (min-width: 1024px) and (min-height: 960px) {
***content***
}
for some reason it worked for me after replacing the AND with comma separate
before:
#media only screen and (min-width : 1024px) and (min-height : 960px)
after:
#media only screen and (min-width : 1024px), (min-height : 960px)
any idea why?
Basically i am trying to block some styles for a particular width range(240px to 480px). Between this range, i do not want certain styles to get rendered.
To be more clear:
I want color:#000 for all other device widths except for the width->240px to 480px. How i can i make use of media not all queries. Hope i am clear..:(
Is this the correct syntax :
I have :
#media not all and (min-width: 240px) and (max-width: 480px), not all and (min-device-width: 240px) and (max-device-width: 480px) {
What im trying :
#media not all and( (min-width: 240px and max-width: 480px )and (min-device-width: 240px and max-device-width: 480px) ){
Can i combine the two :
#media not all and (min-width: 240px and max-width: 480px) {}
#media not all and (min-device-width: 240px and max-device-width: 480px) {}
Any help is appreciated
What you originally have is the correct syntax. The others are invalid.
The not in each media query negates the media query itself, so if the browser matched a certain media query, then not means it has to ignore that #media rule. If the browser doesn't match the media query, then not means it has to apply the rule.
When you combine two or more not media queries in a single rule, at least one of them has to evaluate to true (or "not false") in order to use the rule.
If you are trying to not all the tests at once, then you need to link them all using and:
#media not all and (min-width: 240px) and (max-width: 480px) and (min-device-width: 240px) and (max-device-width: 480px)
But depending on the devices you're testing with this may or may not make sense.
I'm working on developing this responsive Wordpress site: http://www.allisoncassels.com/Test/ and having a problem with my media queries.
I coded the CSS for the following breakpoints:
/* Portrait Tablets */
#media only screen and (min-width: 768px) and (max-width: 959px)
/* Portrait Mobiles */
#media only screen and (max-width: 767px)
/* Landscape Mobiles */
#media only screen and (min-width: 480px) and (max-width: 767px)
On desktop, everything looks great. On my phone and tablet, some things are mobile and some things are still showing like the desktop (stuff I have display: none on is showing, div widths are off, etc.)
The only thing I can figure out is that it's related to my phone/tablet being retina display, but I don't see other sites having to factor that into their calculations...
Really baffled right now, I'll appreciate any help. Thanks
Put this in your head!!! :P
Inside the meta tag.
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Cheers,
Mark
You should add this meta
<meta name="viewport" content="width=device-width, initial-scale=1">
Try this media query for iPhone 6/6 Plus and Apple Watch CSS media queries
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
iPhone 6 portrait
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
iPhone 6 Plus landscape
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
iPhone 6 Plus portrait
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
iPhone 6 and 6 Plus
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
Apple Watch
#media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
For Image responsive
img {
max-width: 100%;
}
This wordpress theme Avando is already responsive:
http://themefurnace.com/themes/?theme=Avando
you don't need to create some additional css
Update
My web host's server was crashing while I was working last night and I think that was affecting the files being properly propagated... All the responsive code works perfectly today.
Try adding a color css border around elements that are not displaying correctly, border:thin red solid; or change the background-color to figure out if you css selector is being used. Also, it will be usefull if you put in links to the page and point out the elements you are having issues with and the device/device browser you are testing on.