I am developing a responsive website and I'm applying the below media CSS queries:
Query1:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /*My Styling*/}
Query2:
#Media screen and (max-width:768px) { /*My Styling*/ }
Query3:
#Media screen and (max-width:1024px) { /*My Styling*/ }
I am also doing this meta statement in the head:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />
For some reason the second and the third query are being applied fine but when I test the first query (Practically targeting iPhone landscape) none of the defined styles get applied.
As you haven't specified a min-width for other queries you should organize your css like this:
query3
query2
query1
That way your last level of css will be applied correctly without getting overwritten by your other queries.
Emulation of a iphone device in landscape orentation in chrome works as intended:
http://www.bootply.com/tumubw4Ztq
#Media screen and (max-width:1024px) { body{background-color:red;}}
#Media screen and (max-width:768px) { body{background-color:yellow;}}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { body{
background-color:blue;}}
Related
/*iphone 6/7/8 plus*/
#media screen
and (min-width : 414px)
and (max-width : 736px)
and (-webkit-device-pixel-ratio : 3)
and (orientation: portrait)
{
#x-section-1 {
margin-top: 274px!important;
}
}
/*iphone x*/
#media screen
and (min-width : 375px)
and (max-width : 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
{
#x-section-1 {
margin-top: 237px!important;
}
}
The above is my media query.
Using google dev tools for responsive testing. When I used iPhone X to test, it displayed correctly with the margin-top is 237px!important.
But when I used iPhone 6/7/8 plus to test, the margin-top value was still reference to iPhone X's margin-top value.
How can I fix it?
This is because your second media query also matches old iPhones. It says that it is applied whenever screen width it between 375px & 812px, and 414 to 736px are in this range also.
To adapt for the iPhone notch you shouldn't use these media queries and instead use some special CSS for this case, as advised by Webkit developers in their article.
Your code will look something like this:
#x-section-1 {
margin-top: 274px!important;
}
#supports(padding: max(0px)) {
#x-section-1 {
margin-top: max(237px, env(safe-area-inset-top)) !important;
}
}
And you also need to have viewport-fit=cover in your viewport meta tag for that to work.
Make sure you have the viewport meta tag in your HTML head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then instead of using max-width / min-width, trying using device-width :
UPDATED CODE:
/* iphone X */
#media only screen and (min-width: 812px) { }
/* iphone 6+, 6s+, 7+, 8+ */
#media only screen and (min-width: 736px) { }
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?
I have been using some media queries for the i Pad and they were working fine until two,three day ago. But they just stop working. My i Pad is not recognizing the media queries while they are still working in Firefox native responsive design test view and other online websites to check the responsive designs.
My initiative queries are with view port in header
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2"/>
#media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { //for landscape
#media screen and (min-width: 755px) and (max-width: 1024px) and (orientation : Portrait) //for portrait.
Then tried these ones too
#media screen and (min-device-width: 768px) and (orientation:portrait){
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#media screen and (min-device-width: 1024px) and (orientation:landscape){
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) and (min-width : 768px) and (max-width : 1024px)
and (orientation : landscape) {
//Also in addition i tried the other view port meta tag too
like
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=2"/>
But no luck
I don't know where I am doing mistake but this kind a important. Please help any kind of help will be appreciated
Try the meta content:
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">
I don't know why this was ever working. I believe the issue is because you are using screen, this media type is reserved for regular computer screens.
Here is a list of the media types:
all: All media devices
aural: Speech/Sound Synthesizers
braille: Braille tactile feedback devices
embossed: Page Braille Printers
handheld: Small/Handheld Devices (like Smart Phones) [NOTE: Android, iOS, & other smart phone browsers ignore this rule.]
print: Printers
projection: Projected Presentations (like slides)
screen: Regular Computer Screens
tty: Media that uses a fixed-pitch character grid (like teletypes &
terminals)
tv: Television-type Devices
Warmth,
Crystal Miller
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.
For my site TheExpeditioner.com I have added mobile specific CSS beginning with:
#media only screen and (max-width: 767px) {
I have also included <meta name="viewport" content="width=device-width, initial-scale=1"> in the header.
However, my site will not display the mobile CSS in mobile devices. Am I missing something? Is this something to do with Wordpress and/or plugins?
Here is 1 thing that my eye caught for now
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
its at line 1499, and there is no closing bracket.