Hi guys I've been trying to work on iPhone 6 CSS (responsive),but i have no luck the iPhone 5 and 6 CSS is working fine in chrome iPhone emulator and http://mobiletest.me/ ,but the same style is not working on the actual device.
Anyone have idea?
My media queries are,
#media only screen and (max-width: 480px) {}
and
#media only screen and (max-width: 599px) {}
also tried
#media only screen and (max-width: 649px) {}
Help.
Try to use <meta name="viewport" content="width=device-width, initial-scale=1"> between your <head></head> For more info visit https://css-tricks.com/snippets/html/responsive-meta-tag/
Add this to the top of <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I need to create desktop and mobile versions of the site. I decided to use media queries in CSS. But when I coded them, I found out that they aren't working and I don't know how to fix them. To fix this issue I went to Youtube where found this example, but I implemented that I found that the media query doesn't work. Then I went to stack and found a similar problem. In that case, it was fixed by adding a meta tag in the head. I did that, but it didn't help me. It wasn't work in chrome and Mozilla.
body{
color:red;
}
#media screen and (max-width: 600){
body{
color: blue;
}
}
<!DOCTYPE html>
<html>
<head>
<title>The car dealer site</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>Title</h1><br>
<h2>Subtitle</h2>
</body>
</html>
You need to specify the units for your max-width property. Change the line
#media screen and (max-width: 600){
to
#media screen and (max-width: 600px){
And try it again
I have created a media query to shrink a div's (#example in this case) padding if the screen width goes below a certain point. See the example below.
#media screen and (max-width: 733px) {
#example {
padding-left: 90px;
}
}
This query works perfectly in IE 11, Firefox Quantum, and Edge. However, when I test it in Chrome, I get the same result as if the query wasn't even there.
After doing some research, I have added slight variations of a viewport entry in my HTML header, and at the moment my entry in <head></head> is:
<meta name="viewport" content="width=device-width" />
(I have also used "width=device-width, initial-scale=1" with no better result)
Lastly, I have also tried using #media only screen instead of #media screen, and this has not worked either.
For some final details my html file is a cshtml file if it makes a difference (this is for a webapp), and I am testing through the VS2017 Community debugger.
Thank you!
Try adding this to your CSS:
#media screen and (max-width:733px),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-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)
{
#example
{
padding-left: 90px;
}
}
and this to the <head> section of the HTML document:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
This code is tested and works. If it doesn't work for you, you might have problems somewhere else in your code, possibly your CSS. In that case please post a link to your site or add some more code, preferably your CSS.
Your code is missing a brace "}".
Below the correct code:
#media screen and (max-width: 733px) {
#example {
padding-left: 90px;
}
}
I created my website and want to make it mobile friendly.
So I created a media query and started working with it. Checking while scaling my browser window.
If I check the same page on a phone it doesn't change the layout.
I can't see what I'm missing.
Here is what I have:
HTML:
<div>
<p>
<h2>Title</h2>
</p>
</div>
CSS:
#media (max-width: 768px) {
h2{
font-size:2.5vw !important;
}
}
h2{
font-size:1.5vw;
}
Hope I missed just a small thing :-)
M.
Sounds like you need to tell the device to use its actual pixel width:
<meta name="viewport" content="width=device-width, initial-scale=1">
Some devices will render pages assuming they are not optimized for mobile. Put that meta tag in your <head> tags and let us know if that fixes it. More info here.
Try adding this into your code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Try this
#media only screen and (max-width:768px) { ... }
OR
#media only screen and (min-width:320px) { ... }
I'm doing some testing on IE 11 and it's using the CSS for mobile devices and not the "full screen" css. Chrome, Firefox, Opera and Safari all use the correct "full screen" CSS, but IE 11 is grabbing the mobile/media css. I've cleared the cache multiple times and looked at the CSS sheet that it's grabbing, and it is using the most up-to-date version.
In the head I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/default.css">
</head>
In the CSS file, I have the following after all of the "full sized" css
//"full sized" css
....
#media only screen and (max-width: 479px) {
//mobile CSS
}
IE 11 on my laptop is using the media CSS and I can't figure out why. I know it's using the media only section and not just formatting incorrectly, because when I delete the media only section from the CSS, it then displays as expected.
can you try this:
#media all and (max-width: 479px) {
//mobile CSS
}
with all you are targeting all devices, and not only the desktop version you are now targeting with screen.
For mobile only, you would do this:
#media (max-width: 600px) {
//mobile CSS
}
I'm using Bootstrap as my responsive framework.
I have got my own style sheet underneath the Bootstrap CSS files, with own Media Queries in it... but when it comes to viewing my web page on my iPhone 4, the heading and tags dont change to conform the way i want to on my phone.
Here is a snippet of the way my code looks:
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
i set the Media Queries as follow.....
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
I've already cleared the cache on my iPhone, but it's still not working
You may have missed the tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
before your imports.
Please refer to the documentation and ensure you followed all the steps:
http://twitter.github.com/bootstrap/scaffolding.html