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;
}
}
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;
}
}
I have an issue with max-width media query. In this if i am use that media query:
#media only screen and (min-width: 320px) and (max-width: 480px) {
}
Then its not work on 480px resolution. But if i am use that media query:
#media only screen and (min-width: 320px) and (max-width: 640px) {
}
its work with on 480px resolution but not work on 640px. Its work fine with Chrome.
I see this below link also. But not successfull.
Media queries not work in firefox
mediaqueries max-width not working in firefox
Media queries not working on firefox
My meta tag is:
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
Please help.
It should work perfectly well in any browser.
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' />
<body>
<div class="change">Some content</div>
</body>
</html>
.change{
background: #f00;
align-items: center;
font-family: sans-serif;
color: #fff;
height: 100px;
display: flex;
justify-content: center;
}
#media only screen and (min-width: 320px) and (max-width: 640px) {
.change{
background: #0f0;
color: #00f;
}
}
Here is a JS Fiddle example, change the width inside media queries, it should still work.
https://jsfiddle.net/rachit5/xm2tnx53/
Note that when output is rendered inside an iFrame, the media queries
will look for the width of iFrame and not the original page.
Using
#media only screen and (min-width: 320px) and (max-width: 480px) {
}
Means that changes would occur when screen width gets to 480px and revert back to normal when screen width gets to 320px
Don't really know what you want but the explanation above should help you out
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'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.
I'm trying to accomodate a really really old website to mobile standards and for some reason it doesn't get a width of 320 or whatever pixel width when i activate the responsive view in chrome dev tools. The result of this makes the pixels small while still maintaining the original 900 px width (in the original pc version that's the fixed size according to which the site was built on)
This would be my media query CSS:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body * {
width: auto;
}
#container,
#header,
#nav,
#container #wrapper,
#content,
#sidebar,
#wrapper-bottom,
#footer,
#footer-inner,
#footer-content
{
width: auto;
height: auto;
float: none;
}
/* Header
-------------------------------------------------------------------*/
#header h1{
display: block;
text-align: center;
}
#header #search{
position: static;
display: block;
}
/* Navigation
-------------------------------------------------------------------*/
#nav ul{
position: static;
}
}
If you need more are viewing into the mobile device and media query is not working then please check the meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1">
You must use meta viewport along with your CSS. Something like this by instance :
<meta name="viewport" content="width=device-width, initial-scale=1">
If you're viewing on your PC remove the word device from min-device-width and max-device-width.
In addition, make sure to use the meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's likely that some element on the page has a fixed width that doesn't allow for the page to resize as desired. You need to go through the elements and find it. I've ran across this issue on several sites.