my media query works as per expected on my desktop however not in the mobile phone or the tablet.Please check out the live code here http://jsfiddle.net/E8cgT/
if the screen is bigger than 1024px it should be green my tablet screen is but the background stays yellow.
This also happens on my cell phone no matter what is stays yellow.
or read below
my html:
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css"/>
</head>
<body>
<div id="master">
<header>
</header>
<nav>
Welcome to the home page from the sites directory
<ul>
<li>Meet Your Sensei</li>
<li>Tour Our Dojo</li>
<li>Our Martial Art Program</li>
<li>Our Training Schedule</li>
<li>Current Events</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div><!-- end of the master div tag -->
</body>
</html>
my css:
/* this will not work as we have below media to over ride */
body{ background-color: red;}
/* Low resolution for cell phones for 480 and below
*/
#media only screen and (max-width:480px)
{body{background-color: blue;}}
/* High resolution for screen between 1024 and above
*/
#media only screen and (min-width:1024px)
{body{background-color: green;}}
/* Medium resolution for screen between 481 and above
*/
#media only screen and (min-width:481px)
{body{background-color: yellow;}}
[SOLUTION]
1) The view port was something which I did not know about.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) I changed the priority of the screen after all is casing style sheets.
body {
background-color: red;
}
#media screen and (max-width:480px)
{body{background-color: blue;}}
/* Medium resolution for screen between 481 and above
*/
#media screen and (min-width:481px)
{body{background-color: yellow;}}
/* High resolution for screen between 1024 and above
*/
#media screen and (min-width:1024px)
{body{background-color: green;}}
Thank you all.
See if this helps you:
Live view
Edit view
I've made a few changes to your code;
Firstly you want to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to the head of your page. This will stop smartphones and other devices from scaling the page.
In your media queries you use #media screen only and .... There's nothing wrong with using only in the selector, though it does have a specific use, to hide the style from older browsers. If this isn't intentional then you can omit it.
( The keyword ‘only’ can also be used to hide style sheets from older user agents.: source
I think you'll have an easier time targeting different size viewports if you use
#media screen and (min-width:Xpx) and (max-width:Ypx){
....
}
as #Tdelang correctly pointed out.
Good luck!
Because of the cascade. You must set an upper limit for the middle breakpoint:
media only screen and (min-width:481px && max-width:1023px)
{
...
Have you tried using
#media all
or
#media handheld, screen and (max-width:480px) { /* your css */ }
try this
http://jsfiddle.net/E8cgT/3/
CSS
/* this will not work as we have below media to over ride */
body {
background-color: red;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body
{
background-color: blue;
}
}
/* Low resolution for cell phones for 480 and below
*/
#media only screen and (max-width:480px) {
body {
background-color: blue;
}
}
/* High resolution for screen between 1024 and above
*/
#media only screen and (max-width:1024px) {
body {
background-color: green;
}
}
/* Medium resolution for screen between 481 and above
*/
#media only screen and (max-width:481px) {
body {
background-color: yellow;
}
}
OR PLEASE USED THIS CSS FOR RESPONSIVE MOBILE,TABLET,DESKTOP
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* 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 */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
#media screen and (max-width:480px)
{body{background-color: blue;}}
/* High resolution for screen between 1024 and above
*/
#media screen and (min-width:1024px)
{body{background-color: green;}}
/* Medium resolution for screen between 481 and above
*/
#media screen and (min-width:481px)
{body{background-color: yellow;}}
use it this will work for me in mobile, ipad and also on window screen.
Related
Initially I had my base CSS and then I added a 640 media query...
#media screen and (max-width:640px) {}
I coded everything to fit mobile devices and everything was fine. A little bit ago I added another media query...
#media screen and (max-width:840px) {}
Now, the mobile part of my site is taking the second media query's code? I don't know a phone that has a max width that large. Why is the 840 media query disturbing my mobile media query?
In order to prevent the override of CSS, use the below code to specify rules only for width between 640px and 840px:
#media screen and (min-width: 640px) and (max-width:840px) {
/* CSS rules for width between 640px and 840px */
}
Alternatively you can reorder the code:
#media screen and (max-width:840px) {}
#media screen and (max-width:640px) {} /* This will override the above CSS rules */
Check out this page: MDN Media Queries to learn some good practices.
The Position (order) of the media queries in the .css file plays an important role, they are in ascending priority order (top to bottom ) in the .css file, you just need to change this order as follows:
Put this #media screen and (max-width:840px) {} media query, above this one #media screen and (max-width:640px) {} and it will fix the issue.
Alternatively you can use the following CSS:
#media screen and (min-width: 640px) and (max-width:840px) {
/* your code here */
}
You can use what manoj said.
This is a guide from CSS tricks - Hope this helps
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* 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 */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Using media query I created different views for different pixel count screens. But now on small screens with high pixel count (like iPhone5, S3, S4) desktop view is shown.
How can I show small screen view i. e. 520px view on these HD screen mobiles?
Some meta tag or whatever html that can help is welcomed.
Try adding these two lines on top of your HTML File.
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<header>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</header>
css
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Is it feasible to developers specify when the contents of the web page stack by responsive design? So for example if you are in 1200 x 1800 resolution, you are in the following display:
[A] [B]
However, if you are in 1000 x 1800 resolution, your display automatically in the following stack format by the virtue of Twitter Bootstrap's responsive functionality (I use Bootstrap 3):
[A]
[B]
However, is it feasible for developers specify when the responsiveness occurs - for example, when the resolution is less than 1100 x 1800, the above stack occurs - and if it's feasible, how can I specify it?
I use Bootstrap, HTML5, CSS3 as well as node.js, but I think node is irrelevant in this case.
I use Google Chrome, and don't care about how the other browsers react to the change.
Thanks.
One approach may be to have a look at media queries (2), e.g. quoting from Mozilla
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* 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 */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
I hope help you
I am trying to implement the CSS #media option but I am experiencing some issues.
I have three options, landscape, portrait, and mobile. The mobile only activates vertically but horizontally it doesn't activate (basically get the landscape option).
Here is the CSS:
#media (orientation:landscape) {
/* some css */
}
#media (orientation:portrait) {
/* some more css */
}
#media mobile {
/* more css */
/* basically the same as vertical */
}
How do I do this properly? I want my mobile option to be the same as my portrait option.
Can you try following:
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
For mobile screens, i think you need to define minimum resolution like this:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
You're missing screen and...
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
iPhones normally scale the website, so you also need this meta tag:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
For iPhones running a version before 4.0, you can use the following
/* Portrait */
#media screen and (max-width: 320px) {
/* Portrait styles */
}
/* Landscape */
#media screen and (min-width: 321px) and (max-width: 480px) {
/* Landscape styles */
}
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 4 months ago.
I am designing a responsive web page. I have a div whose width should decrease when the screen size decreases.
This div also contains a list of two image links. They should remain inline even when the screen width decrease.
/* The CSS */
div.mymenu{
margin-right:7%;
margin-top:-53px;
background:#000;
width: 28.5%;
opacity:0.8;
}
div.mymenu > .nav-pills{
margin-bottom:7px;
}
div.mymenu > .nav-pills a{
color:#fff;
margin-left: 30%;
}
div.mymenu > .nav-pills a:hover{
background:none;
}
<!-- The HTML -->
<div class="mymenu pull-right">
<ul class="nav nav-pills">
<li>Why Us</li>
<li><img src="img/news.png" /></li>
<li><img src="img/help.png" /></li>
</ul>
</div>
I am using twitter bootstrap. I tried making changes to bootstrap-responsive.css - but no change. I made changes such as :-
#media (min-width: 768px) and (max-width: 979px) {
.mymenu{
width: 20%;
}
}
For fluid designs, I very much recommend using Skeleton: http://www.getskeleton.com/
Here you have a standard for #media queries
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
#media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
#media only screen and (max-width: 767px) {
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
Greetings from Argentina!
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* 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 */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Your current media query is going to limit those styles to browsers between 768px and 979px. Remove the 2nd media query (979) to have it apply to all viewports wider than 768 px.
#media (min-width: 768px) {
.mymenu {
width: 20%;
}
}
Also, just a note, i'd suggest trimming selectors like div.mymenu down to just .mymenu the div limits the applicability of the selector (perhaps you will want a ul to have the same styles as .mymenu) and it's more typing : )