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.
Related
I have been struggling with the iPad portrait view of a post grid on my site. The grid looks fine in all other view except for this one, where the grid appears on the far right-hand side of the container.
The theme's (Alexandra) CSS is as follows:
#media only screen and (max-width: 941px) and (min-width: 768px).container {width: 726px;}
I've tried to modify this by using:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) .container {width:510px;}
And:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {width:510px !important;}}
Also:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {margin-right: 200px;}
As well as several other configurarions and nothing happens. Any ideas on what I'm missing or why this isn't working or changing anything? Thank you so much for reading! Any insight is greatly appreciated!
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
So you should add to index.html this meta:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
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 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;}}
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
If you go here on an iPad, and click through to Chapter1 > Chapter 1 > Get started... you will see after a loading screen the Chapter 1 page.
Basically what this is, is html embedded into an iframe being pulled together by HTML5 and JavaScript. the html in this iframe calls its own css sheet called other.css. The html file that pulls this all together is calling a stylesheet called styles.css.
Obviously I want in portrait view the content area of this iframe to be smaller than in landscape. I am using the css in other.css :
#media only screen and (device-width: 768px) and (orientation:landscape) {
#content {background:green;}
}
#media only screen and (device-width: 768px) and (orientation:portrait) {
#content {background:blue;}
}
The problem is that its like it doesn't even see the portrait css. I have tried a dozen different ways ( this is supposed to be the correct way and works for the styles.css adjustments to the whole page) but it will not recognize it. It will only use the landscape. Its not as though it wont see the media queries, it pulls the landscape CSS. But WILL NOT use the portrait. Really weird. If you see green for the bg in portrait and landscape its ignoring the portrait. If you see blue it's working. How can I achieve this?
If I get rid of landscape CSS, it prefers the default to the portrait. makes no sense. Could the iframe be hindering its pulling in new CSS upon orientation change?
You should target min or max device widths or you will miss out devices.
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
from http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Here's an explanation why you probably shouldn't even be that specific http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised
what you could try doing is creating two different stylesheets specifically for desktop & Tablet so;
<link rel="stylesheet" media="screen" href="css/stylesheet1.css"> <!--Desktop-->
<link rel="stylesheet" href="css/tablet-nav.css" media="screen and (min-width: 800px) and (max-width: 1024px)"> <!--tablet-->
and dont forget to add;
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
http://webdesignerwall.com/tutorials/css3-media-queries