I'd like the background color to change while changing orientation. I have the following code:
<meta name="viewport" content="width=device-width">
...
#media all and (max-device-width: 360px) {
div { background-color: green; } }
#media all and (min-device-width: 361px) {
div { background-color: blue; } }
Unfortunately this doesn't work. But when i change max-device-width and min-device-width to max-width and min-width it works.
Why the code with max-device-width and min-device-width isn't working?
This should work:
Add this to your HTML Page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And to your css code you have to add:
div {
background-color: blue;
}
#media (max-width: 360px) {
div{
background-color: green;
}
}
So when the window width is under 360 Pixel, the background-color will change to green, otherwise it will be blue.
Because it has to know that it is a device by displaying it. So it excludes all desktop visibility.
I would recommend not using this because not all device browsers send a recognition that the content is viewed on a device making it unpredictable when your design is applied.
Stick to min-width and height it is saver.
Related
I want to hide a div on all devices with a screen resolution that is less than 1024. This is the div that adds the space after 3 images:
<div class="page-banners clearer"> </div>
And this is the page:
http://m.theseolounge.co.uk/
and this is the code I am using:
#media only screen and (max-device-width :1024px)
{
.page-banners
{
display: none !important;
}
}
What am I doing wrong?
Make sure you have a <meta> viewport tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Don't use !important for the style, and use max-width instead of max-device-width, like this:
#media only screen and (max-width:1024px){
.page-banners {
display: none;
}
}
My #media only screen and (max-width:860px;){ doesn't work on the browsers when I put the html-code inspector on mobile.
its mostly explained on this image.
It does work on my other #media codes for example:
#media only screen and (max-width: 1000px) {
.extramargin {
margin-left: 0;
}
#click {
margin-left: 40px;
width: 90%;
}
}
If more code is needed I can send more code. I don't know what part of my code cause I have 1200 lines of code and have to search a time before I will find everything to make a code snippet. But if its needed I can do that.
You have to tell the browser that you want the width of device to be the ACTUAL width of the device. So, you have to set the viewport.
Just include this in the <head> section
<meta name="viewport" content="width=device-width, initial-scale=1" />
I have a website which must be responsive for mobile phones. I've created it using my desktop.
When I adjust browser windows it's working perfectly but when I check it on my mobile phone(Microsoft-640), it seems not responsive to the mobile view.
PLease you can add meta tag viewport for responsive as under:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will be helpful to make your website as mobile view by your own.
The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things.
For example:
Width and height (of the browser window)
device width and height
orientation – for example is a phone in landscape or portrait mode?
resolution
Linking a separate stylesheet using media queries
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices
we can use the following syntax:
#media only screen and (max-device-width: 480px) {
}
Example code:
#media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}
For some more reference: 1 click me please, 2 click me too
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
Problem that bugs me at the moment. Have not found answer so far.
I've got a site with minimum width of 480px applied for devices with screen smaller than 640px;
<meta name="viewport" content=" initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
<style>
body {margin:0; padding:0;}
#media screen and (max-width: 640px) {
.div {width:100%; min-width:480px; background:#ff0000; color:#ffffff;}
}
</style>
Thing is, when you open a file on mobile, it does not fit the screen in portrait mode. You need to double click to fit it.
Is there anything could be done so that opens fit to screen on portrait mode?
Thanks guys.
You have maximum scale and initial scale in your viewport. Change your viewport to : <meta name="viewport" content="width=device-width, initial-scale=1.0">
Ahhh got ya. Right, below are two links... the 2nd one works keeping the color red - I think that's what your after (code for 2nd link example below, you will need both #medias)! Works on my phone now anyway!
http://www.bootply.com/render/115758
http://www.bootply.com/render/115760
#media (min-width:480px) and (max-width: 640px){
.div {
width: 100%;
background: #ff0000;
color: #ffffff;
}
}
#media (max-width: 640px){
.div {
background: #ff0000;
color: #ffffff;
}
}