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 */
}
Related
This is my first attempt at using html and css. I know there’s many mistakes in the code, but if someone could point me in a direction to get it viewable in mobile, I’d be very appreciative.
Use this code. Change styles based on the device you are using
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
#media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
#media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
#media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
#media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
#media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
I have a website that uses "card" views. When viewed on a desktop I set the CSS for the card as such:
width: 75%
margin: auto
I did this so the "card" would not take up the entire width which looks nicer on the desktop:
But what I am trying to figure out is how to take the width and margins auto off when the screen sizes changes to a mobile smaller screen. I want the card to be width 100% when in mobile view for obvious reasons. How can I change the CSS based on width of the window?
Here's a standard bootstrap mediaqueries.make sure you put this meta tag on head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
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 */
}
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.
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 : )