Tackling The Notch. What Am I Doing Wrong? - html

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);
}}

Related

HTML and CSS resizing on mobile with Codepen, but not after publishing on Github or Bluehost

For some reason, I have a code that is completely identical and it works fine when I test it on codepen, but it will not resize at all when I bring it to github for publishing.
The codepen is: https://codepen.io/daniel-albano/pen/ExaedBr?editors=1100
This is one extract of my CSS not properly resizing:
.mission2 p {
font-size: 1.5vw;
font-family: 'roboto';
padding: 4% 0% 0% 0%;
clear: right;
line-height: 1.4;
}
The actual website is located at: MFASP.com
I honestly have no idea what to look at for the cause of this, as both codes are exactly the same.
So I did a bit of digging and found the solution. I had not been used to using
meta name="viewport" content="width=device-width, initial-scale=1.0"
this tag, but adding it into my html had allowed the browser to resize.
Based on the issue you are having, you need to add a viewport meta tag to your page head. This is most commonly <meta name="viewport" content="width=device-width, initial-scale=1.0">.
So your html would have the Doctype followed by something along the lines of..
<head>
...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>

Extremely basic media query not working on mobile

This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}
#media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>
My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.
My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.
Am I going nuts?
Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Why is "width=device-width" totally not working?

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.

How to make website bigger on mobile with media queries

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;

Responsive Site Design - Meta and MS viewport together?

I did read about this elegant CSS viewport definition:
#viewport{
zoom: 1.0;
width: extend-to-zoom;
}
Unfortunately it's not fully supported.
Could this piece be used together with the regular meta tag?:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And what about:
#-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
For creating a responsive website, the best combination would be the following tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
and the following css:
#-ms-viewport{
width: device-width
}
This makes the website width equal to the user's device width on every modern browser.
If you have more questions, comment. If it helps, +1 and accept.