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.
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?
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
I have placed
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
in my header. I want a specific css for screen width 768px but my div with class price-tag is not taking style from
#media only screen (min-width:768px) {.price-tag{left:180px;}}
If I write
#media (min-width:768px) {.price-tag{left:180px;}}
it takes the style and applies it to all screen width. Am i doing this in wrong way ?
You need to use and.
This isn't valid:
#media only screen (min-width:768px)
It should be:
#media only screen and (min-width:768px)
Applying to 768px specifically:
If I've understood your comment correctly you'd like to apply styling to screens specifically at 768px wide. No lower; no higher. While I can't quite picture why such code would be useful or practical I can show you how to do it.
Combine min-width and max-width using the same value:
#media only screen and (min-width: 768px) and (max-width: 768px) {
I have a website that has a fixed width of 1024px and is centered on desktop. On mobile devices, the width should match the size of the phone or tablet.
When using device-width, like this
<meta name="viewport" content="width=device-width, initial-scale=1" />
I get following result:
I get the same result using width=1024.
... Which is really confusing, since the user is unable to gather an overview. I don't know why device-width sets the website's viewport to this particular size. I would expect otherwise.
What I'm expecting and what I really want is something this:
Question: How do I tell the device to fit the website on the screen exactly?
In order to make a website adaptive and responsive I recommand using
#media screen and (max-width: the max width you want){ }
You can also add this in your . This will make the initial scale 1 and allow for some zooming into 3.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3" />
You also need to use % instead of pixels on wrap elements. This way it adjust according to your screen.
Here is an example:
For devices with 0-500px width, run the second CSS code.
For devices with 500-1600px width, run the first CSS code.
You can also specify for retina using this:
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){ }
This is the other example:
/** From 500 - 1600px width **/
#media screen and (max-width: 1600px){
body {
background-color: #fff;
}
}
/** From 0 - 500px width **/
#media screen and (max-width: 500px){
body {
background-color: #000;
}
}
I asked a similar question earlier. You can check it out here.
What you got when remove scale factor from meta tag? And another question: do you want users to zoom (scale) page or not? I shall try better:
<meta name="viewport" content="width=device-width" />
and also:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
For fitting height and width you can play with those meta:
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
I am less confused to make a website only for mobile and tablet not a desktop. I need to know only one thing.
Should I use <meta name="viewport" content="width=device-width, initial-scale=1"> and define #media only screen for specific device?
Yes, however your website still will be accesible from other devices.I can explain it for you:
Using tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
It will adjust webpage width to match device width and set initial scale to 1 (no zooming). So for example, if you open this page using iPad, web browse will display page in 1024x768 (landscape) or 768x1024 (portrait).
initial-scale=1
This will force to display webpage with zoom set to 1.
Using media queries CSS3 you can set different CSS styles for different devices:
Styles for Tablets
#media screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles for tablets */
}
Styles for Desktop
#media screen and (min-width: 1025px) and (max-width: 1280px) {
/* Styles for Desktops */
}