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
Related
I am trying to add a media query which contains min. It's not working in safari browser.
#media (min-height: 568px) and (max-height: 568px) and (min-width: 320px) and (max-width: 320px) {
#exe {
width: 100px !important;
}
}
Above code is working fine in chrome browser. But no idea why it's not executing in safari mobile mode.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
Already added the above meta tag as well. Any idea to solve this?
#media only screen and (max-width: 620px) {
.priority-images{
width: 65% !important;
}
}
#media only screen and (min-width: 320px) {
.priority-images{
width: 90% !important;
}
}
.priority-images is registering 620 breakpoint instead of 320 breakpoint and its frustrating me, I know it targets everything below but when I have used this method with success before any suggestions?
Basically, you are following both mobile-first (min-width) and desktop-first(max-width) approach together. And there is an overlap from 320px to 620px here, in which case 320px takes precendence not the 620px.
In your media query:
#media only screen and (max-width: 620px) {...}
The viewport is targeted from width=0 to width=620px of the screen. However when you used:
#media only screen and (min-width: 320px) {...}
Now when your browser width gets 320px of width, the 620px media query is overridden by this one.
And as per my observation and code snipper, the .priority-images is not getting precedence at 620px but at 320px itself . The min-width:320px media query takes full control of CSS as soon as the Browser width gets greater than or equal to 320px. So, I don't see min-width:620px media query being applied after the 320px browser width at all.
Check the below code snippet:
body {
height: 100vh;
width: 100vw;
}
.priority-images {
height: 90%;
margin: 0 auto;
}
#media only screen and (max-width: 620px) {
.priority-images {
width: 65% important;
background: orange;
}
}
#media only screen and (min-width: 320px) {
.priority-images {
width: 90% important;
background: green;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article class="priority-images">
There are no accidents ... No there are not !!!
</article>
</body>
<script src="./script.js"></script>
</html>
if you want the 320 breakpoint to be applied when 320 screen size is reached change the
max-width: 620px
min-width: 320px
to
min-width: 620px
max-width: 320px
here is the codepen
https://codepen.io/shammlo/pen/YzGQKjQ
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 am trying to make a responsive website for desktops, tablets and mobile devices but I am facing some trouble. I created a document called responsive-Ipad.css that would work only in Ipads (I set the min-width to 600px) but somehow the css files are affecting the screen content in any device (tablet, mobile or desktop). I have 2 other css files.
style.css that I use to set the desktop layout,
responsive.css to set the mobile layout and responsive-Ipad.css for Ipads.
the style.css doesn't have media query
the responsive.css starts with this line code:
#media only screen and (max-width:420px){
and the responsive-Ipad starts with this line code:
#media only screen and (min-width: 600px){
Does anyone know how to fix this?
Image that represents the problem
Try using these media queries and add this meta tag
<meta name="viewport" content="width=device-width" />
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#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 */
}
Check whether you have included your CSS (File path should be proper) file properly in your HTML page. And for responsive web page you need the below meta tag to be included in your HTML page. Just before including your CSS file.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
This will be better if you include these lines in your HTML page.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
/*
CSS for your media query
*/
#media (max-width:420px){
/*your css for devices that are below 420px*/
}
#media (min-width:600px){
/*your css for devices that are above 600px*/
}
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/responsive-ipad.css">
</head>
<body>
<!--HTML Content-->
</body>
</html>
Make sure you include all your css files into your HTML file.
Hope this helps.
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;
}
}