Taking on The Notch: How Can I Improve?

I'm currently working on a website for my friend's bar, but I'm facing an issue with Chrome where the content can't push past the "notch". Interestingly, Safari displays it fine on mobile, while Chrome has this unsightly white space.

It appears that setting "initial-scale=1" in the viewport meta tag is causing the site to be restricted from extending beyond the "notch/cut" in Chrome (especially in 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);
}

Check out flamningo.steeple.xyz for more information.

View how it extends past the "notch" on Safari here.

See how it's impacted by the "notch" in Chrome in this image.

htmlcssiosgoogle-chromemobile

Answer №1

After experimenting a bit, I discovered that the culprit was the "initial-scale=1" in the meta tag. Not entirely sure why, perhaps it has something to do with quirky CSS or JavaScript.

I played around with some different values:

Ultimately, I found that 0.9 struck a good balance between Chrome and Safari, both in landscape and portrait modes.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to successfully implement ng-show with Html5's <dialog> tags

It's incredible how simple Html5 dialogs are. It feels like they should have been here 15 years ago! I'm having trouble getting ng-show to work with dialogs. Any tips on how to make it happen? <!DOCTYPE html> <html ng-app="project"> ...

angularjshtmldialog

Unable to play back .mov files uploaded to the server using AVPlayer

I recently uploaded a .mov file onto my server, but I am encountering issues with playback in my app. Interestingly, the code works perfectly fine when tested with a different URL: override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObjec ...

iosswiftavplayer

Container slide-show fill error

I'm attempting to create a slide show with an overlapping caption that appears when hovering over the container or image. The image needs to fit exactly inside the container so no scroll bar is shown and the border radius is correct. I managed to achi ...

javascripthtmlcsscontainers

Use Bootstrap to effortlessly arrange columns horizontally in a row

I'm facing a scenario where I need to arrange the columns in a row horizontally. The challenge is to ensure that the row expands horizontally to fit the columns. I attempted to use white-space: nowrap on the row, remove floats on columns, and set the ...

htmlcsstwitter-bootstrap

Creating a disabled HTML button that reacts to the :active CSS pseudo class

CSS: button:active { /* active css */ } button:disabled { opacity: 0.5; } HTML: <button disabled="disabled">Ok</button> After clicking the button, the browser applies the button:active state to give the appearance of a click, despite the ...

htmlcsscss-selectorspseudo-class

Refresh in AJAX, automated loading for seamless transition to a different page

Having an issue with the page not auto-refreshing, although it loads when I manually refresh. P.S Loading the page onto another page. Below is my HTML and AJAX code along with its database: The Trigger Button <?php $data = mysqli_query ...

javascriptphpjqueryhtmlajax

I am experiencing an issue with the button that is supposed to link to a section within the same page while it is located within the jumbotron. Interestingly, the button

I'm facing an issue with a button placed inside my jumbotron. The button is supposed to link to a specific section within the page, but it's unresponsive. Even hovering over it shows no interaction. Strangely, if I move the button outside of the ...

htmlcssbootstrap-4

Jquery adds a fun, wobbly effect to animations

I'm experiencing an issue with the animation I've implemented causing some slight shaking and wobbling of the text and certain elements which is affecting the overall look. You can view a live example of this behavior here: This problem specific ...

javascriptjqueryhtmlcss

Creating a Google Captcha with validation is a straightforward process that can enhance the

I am having issues with adding Google Captcha to my form. Despite all fields working properly, the Captcha integration seems to be causing some disruptions. I have included my code below. Thank you in advance for your help. Please also check the following ...

javascriptjquerycsshtmltwitter-bootstrap

What is the best way to target an HTML element that is only connected to a particular class?

My HTML code includes the following 3 elements: <span class="a b"></span> <span class="a"></span> <span class="a b"></span> I am trying to select the element that only has the class "a". When I use $("span.a"), it sele ...

jquerycssclass

Issue with border-color in CSS on Chrome tables

Here is a table style I have defined for selected elements: tr[selected] { background: #FFF; border-color: #000000; color: #000000; } To apply this style, I use JavaScript: $this.unbind().change(function () { element = $(this).parent ...

javascriptjquerycssgoogle-chrome

Create a retweet/share feature by integrating Parse

Struggling with this topic for quite some time now, so any help or pointers would be greatly appreciated. Here's the scenario: User A is following user B, but not user C. User B shares a post from user C. In User A's feed, the reshared post appe ...

iosdatabaseparse-platformstructure

Utilizing jquery and ajax to submit a form seamlessly without the need to refresh the web page

I've been struggling to submit a form without refreshing the entire page. I integrated some source code that I found, but for some reason, it's not working! Here is the HTML form I'm trying to submit: <form method="POST" action="" name= ...

phpjqueryhtmlajax

Issue with the alignment of form input fields and buttons in Mozilla Firefox

Fixing Form Field Alignment Issue in Firefox After encountering and solving a form field alignment issue myself, I realized that the problem persisted in Firefox while displaying correctly in Chrome. Here's how I resolved it, although I am open to mo ...

csssymfonylesstwigstyling

Is there a way to verify that a form field has been completed?

Currently, I am grappling with a method to clear a field if a specific field is filled in and vice versa. This form identifies urgent care locations based on the information provided by users. The required entries include the name of the urgent care facil ...

javascriptjquerycss

What is the best way to integrate Sass into my CSS?

Currently, I am diving into the world of Sass and I am truly impressed by its simplicity. However, I have encountered a hurdle when it comes to compiling and importing my styles. Whenever I look at my style.css file, I notice that it includes not only the ...

csstwitter-bootstrapsasscompass-sass

How can Bootstrap be utilized for Image Overlay?

I'm currently using bootstrap and have a 3x3 grid of 200x200 images. I've searched everywhere for a solution to add an overlay, but haven't had any luck so far. I'm still new to coding and trying to figure things out. I saw on Serenbe. ...

htmlcssoverlay

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

htmlcssimage

Encountering a challenge while attempting to execute JavaScript unit tests using Intern with a Chrome Driver on a Selenium Docker Image

I'm attempting to execute my javascript unit tests using Intern with a Chrome Driver on a Selenium Docker Image (Please note that these tests are successful when run locally with versions of Intern and Selenium). I have completed the following 5 steps ...

dockerseleniumgoogle-chromeselenium-webdriverselenium-chromedriver

When the Navbar div is set to Position:fixed, it generates empty space on the page

I'm facing the issue of unwanted white space in the center of the page below the Navigation Bar. Despite numerous attempts to remove it, I haven't been successful. Below is the HTML code snippet: html: <!DOCTYPE html> <html> <h ...

htmlcsswhitespace