i want to test the orientation by using css for ipad.This is the css file i use
#media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
#media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}
I am not sure whether this will work or not. I tried testing in an iphone emulator by changing the device width to 320px.But it didn't work. Do i need to change anything in this css file?
This is how i call the css in the main page
<link rel="stylesheet" type="text/css" href="iPad.css" />"
This is what I use for calling stylesheets with landscape and portrait stylesheets:
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/portrait.css">
I also found this link for you which is pretty helpful:
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
I resolved the problem by using this css.
#media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
#media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}
Related
This is my current code:
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 750px)">
Is there an option to have a min AND a max query?
I tried media="screen and (min-width: 250px), screen and (max-width: 750px)"
but it didn't work.
Is there a solution for this?
I think you need this way
Make a file for styles route and import other the style file in the #media for any size
example :
#media only screen and (max-width: 750px) {
#import "./example.css";
}
In style.css there should be a query like this.
Example: on screens that are 600px or less, set the background color to olive
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
You can use simply like this.
#media only screen and (min-device-width: 767px) and (max-device-width: 1024px) {
/* your code here */
}
My goal is to get a big button to show on the website when it's on mobile. I want it to show when the screen is at 600px width maximum. Also, I've written some code with my classmates.
We want it to show the div tag when it's on a mobile device.
We'd love your guidance, thank you.
#media screen and (width:600px;){
.button {
display: url(http://examplepicture.com/blablabla);
}
}
#media screen and (max-width:600px){
.button {
display: block; /* alternatively inline-block */
}
}
to show on mobile. You can then have the "default" setting in your main css file to have that div hidden:
.button {
display: none;
background-image: url('http://examplepicture.com/blablabla');
/* other properties go here */
}
This will make the .button class object be hidden on viewports greater than 600px, and visible if lower.
Demo
There is no such thing as "css = mobile". You have to bind some css rules to the screen resolution.
Since all mobiles have different screen resolution, you will have to subjectively choose a limit where you consider the screen being a mobile one.
Putting:
#media screen and (max-width:600px){
.button {
display: block;
}
}
Will show the button class to every screen with a resolution less than 600px, being a mobile or a small windowed computer browser. And it will not show on tablets with more than 600px width.
Any Windows or Linux or MacOS user on a desktop computer will be able to see the "mobile" version of a website if they shrink their browser's window.
EDIT: I updated the code.
make sure you have this in your <head> section of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
You have some syntax errors in your css. Try this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/8/
#media (max-width:600px){
.button {
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
}
And if you want the button not to be visible over 600px do this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/10/
.button {
display: none;
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
#media (max-width:600px){
.button {display: inline;}
}
Step 1 : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 2 : <div class="onphone">Hello</div>
Step 3 :
.onphone{display:block;}
#media screen and (max-width:768px){
.onphone{display:none;}
}
It's typically better to create individual CSS sheets for mobile devices... In that case you can do media selectors for your CSS sheets... Here is basically what I use in most cases
<!-- Desktop: Firefox , Chrome , IE -->
<link rel="stylesheet" media="all and (min-device-width:769px)"href="/CSS/Style.css"/>
<!-- Mobile devices: phone and ipad -->
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)"href="/CSS/phone_portrait_style.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px) and (orientation:landscape)"href="/CSS/phone_landscape_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)"href="/CSS/ipad_portrait_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)"href="/CSS/ipad_landscape_style.css" />
Then in each of those sheets, you can create the CSS you want to be shown on whichever specific device you'd like. So for a phone maybe the button is 240px when in portrait, but 320px in landscape.
Just be careful, because the way you have it, your CSS for phones will ONLY be displayed if the resolution is exactly 600px.
You should also note that in your mobile portrait css sheet you should have:
.button {
display: block;
width:100px;
background-image: url('http://examplepicture.com/blablabla');
}
and in the desktop css:
.button {
display: none;
}
And if you don't like this method, I was just trying to get you bonus points for different sized buttons for different phone/tablet orientations ;)
so on phone portrait css
.button{
display: block;
width:200px;
background-image: url('http://examplepicture.com/blablabla');
}
And BAM! You got some device-reactive CSS sheets that will impress mom and dad!
I wrote a simple HTML program for experimental purposes:
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
#media screen and (device-height: 375px) and (device-width: 667px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
</body>
</html>
But ut doesn't change color when it is tried in iPhone 6. What is wrong with the code? Is logical expression correct?
this works for me on the iphone 6:
#media only screen and (min-device-width: 374px) and (max-device-width: 376px)
this works on the iphone 6+:
#media only screen and (min-device-width: 413px) and (max-device-width: 415px)
This works in a browser and hopefully on your IPhone too:
(Max-width and min-width instead of device-height and device-width)
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
#media screen and (max-height: 375px) and (max-width: 667px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
</body>
</html>
Use max-device-width and min-device-height.
#media all and (min-device-width: XXXpx) and (max-device-width: XXXpx)
Help! I created a Heroku app and my CSS3 #media queries aren't working on mobile devices(checked phone and tablets already). Weirdly, they only work on web browsers(I've checked by resizing pages in chrome and firefox).
I've already included the viewport meta tag in my html document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >
And here's a portion of my #media query syntax:
#media only screen and (max-device-width: 361px) {
.realstff-wrapper {
height: 88vh;
}
#gall-box {
display: none;
}
#img-caption {
float:right;
right: 0em;
height: 20px;
width: 200px;
}
#img-block {
height: 100vh;
overflow: hidden;
}
}
I've tried changing #media syntax to these styles, but none of them seem to do the trick:
#media (max-width: 843px){ }
#media (max-device-width: 843px){ }
#media (max-width: 843px) and (max-device-width: 843px) { }
#media screen (max-device-width: 843px){ }
#media screen and (max-device-width: 843px){ }
#media only screen and (max-device-width: 843px){ }
#media only screen and (max-device-width: 843px), (max-width: 843px) { }
#media only screen and (max-device-width: 843px), only screen and (max-width: 843px) { }
I really can't figure out why it's acting out on me :( Kudos for whoever can help solve this problem.
Solved my own problem. The #media syntax I originally used actually worked in conjunction with view metatag.
Turns out I just wasn't "git commiting" my changes correctly through command line.
Embarassing..heh...
I have added the following code to my style.css file in my wordpress theme but it doesn't work. I want the body background to change for screen widths between 768 and 1024px
CSS:
#media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
One of possible solutions is including
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To head tag
You might have an issues with the order of the media query in which you mentioned the styles
check this fiddle, change the browser width to see the the media query in action
#media screen and (max-width : 1500px) {
body {
background: #000;
border-top: 2px solid #DDDDDD;
}
}
#media screen and (min-width : 768px) and (max-width : 1024px) {
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
This fiddle works fine, but if you change the order of the media queries it wont work...try it for yourself!
CSS always selects the last style that was declared if multiple style are found for an attrib.
for e.g :
#media (max-width: 1024px) {
body {
background: black;
}
}
#media (max-width: 768px) {
body {
background: white;
}
}
for 765px ( since both m.q cover this width ) color selected would be white
sometimes one may miss adding px at the end of the number
#media screen and (max-width: 1024)
This will not work, so px should be added as the following
#media screen and (max-width: 1024px)
try
#media only screen and (min-width: 768px) and (max-width: 1024px) {
}
you can also make another file like: smallScreen.css and add it directly in your head tag under your main stylesheet using this code:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" media="only screen and (max-width:768px) "href="/smallScreen.css" />
then you can add style in the new file as well if "only screen and..." doesn't work you may avoid using: only
if someone is still facing issues, one minor reason could be the syntax.
make sure you provided space between {and} and (max-width:1500px} --->
wrong one ----->
#media only screen and(max-width:1500px){
body{
background-color: coral;
}
}
right one ------>
#media only screen and (max-width:1500px){
body{
background-color: coral;
}
}
only a single space could decrease your frustration level drastically.