I have a problem with setting media queries on devices. It doesn't work at all. It works like normal width. Why is that?
<meta charset="UTF-8" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
And this is how I use it:
#media only screen and (min-width: 600px) {
background-color: lightblue;
}
It is very simple. You didn't put background-color: lightblue; in a tag
it should be in something like a html or body tag.
You should also update your meta tag to
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Your code should look something like this:
html{
background-color:red;
}
#media only screen and (min-width: 600px) {
html{
background-color: lightblue;
}
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
If you want the webpage to turn light blue when it is smaller then 600px you should swap the two colors
For more info you can go to w3schools they explain media queries very clearly.
Related
I'm developing a website and I'm struggling with the nav bar and my main issue is that the html responsive code is not working with me i don't know why can someone guide me?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this is my responsive html code I only write it in html page I should write another responsive code in css?
Then you start your yiur html filelike this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
meta viewport is important but you need to add #media with breakpoint that you need in your css file, for exemple like this:
.container{
width: 90%
background: red;
height: 100px;
}
#media screen and (min-width: 800px) {
.container {
width: 80%;
background: green;
height: 200px;
}
}
Here you will find more informations.
I'm building a business website for a company a friend and I came up with, but the mobile version of it is terrible if you zoom out on a phone.the website is B.C Infinity Contracts (https://bcinfinitycontracts .ca).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Welcome to B.C Infinity Contract Solutions</title>
<meta name="description" content="Let B.C Infinity Contract Solutions be your choice for landscaping, lawn work, and odd jobs in the okanagan."/>
<meta name="keywords" content="landscaping, odd jobs, painting, lawn Care, penticton,south okanagan"/>
<meta name="robots" content="index,follow" />
#media (min-width: 768px) and (max-width: 991px) {
#bs-example-navbar-collapse-1 {
padding-right: 0;
float: right;
}
#bs-example-navbar-collapse-1 > ul:last-child {
display: none;
}
}
#media (min-width: 768px) and (max-width: 1366px){
.imgresize{
width:95%;
height:95%;
}
}
#media (min-width: 1px) and (max-width: 767px){
.imgresize{
width:25%;
height:25%;
}
}
Try changing your meta tag for viewport to the following. <meta name="viewport" content="width=device-width, initial-scale=1">
Next you'll want to modify some of your CSS to better work with the responsive design.
Specifically on the website you have a logo that isn't responsive.
<img alt="logo.jpg" class="center-block" src="images/logo.png">
You can make this more responsive by adding some CSS to it.
try
width: 100%;
max-width: 1028px;
This should give you a base to work on your responsive design.
Making a little site for my friend's bar but I can't figure out why I can't push past the "notch" in Chrome. Safari looks ok on mobile but Chrome has that hideous white space.
So far it seems like "initial-scale=1" prohibits the site from pushing past the "notch/cut" in chrome (landscape mode).
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
#siteWrapper {
margin-left: 16px env(safe-area-inset-left);
margin-right: 16px env(safe-area-inset-right);
}
flamningo.steeple.xyz
Here it is pushing past the "notch" on Safari
Here it is being affected by the "notch" in Chrome
After some trial and error, I narrowed things down to the "initial-scale=1" in the meta tag. Not sure why, probably some funky CSS or JS.
Tried some different numbers:
0.9 seems to be a nice fit between chrome and safari in landscape and portrait.
<meta name="viewport" content="initial-scale=0.9, width=device-width, height=device-height, viewport-fit=cover, user-scalable=no">
#media screen and (max-width:900px) {
#siteWrapper {
margin-top: 16px env(safe-area-inset-top);
margin-left: 16px env(safe-area-inset-left);
margin-bottom: 16px env(safe-area-inset-bottom);
margin-right: 16px env(safe-area-inset-right);
}}
My website: click
How to make the website bigger on mobile phones? I would like to have bigger logo and other stuff. The zoom property is not working on iPhone, as I have this in my CSS:
#media screen and (max-width: 767px) {
body {
zoom: 150%;
-moz-transform: scale(1.5);
}
}
Zooming your website is a bad idea. Try adding this to your <head> and read more about the viewport meta tag on Mozilla Developer Network.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
first set your viewport
<meta name="viewport" content="user-scalable=yes, minimum-scale=0.75, maximum-scale=3.0" />
the write zoom like
zoom: 1.8;
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) { ... }