I have a problem with this simple website. Only on mobile chrome browser, the width of the navbar is wider than the width of the body. I looked for fixed widths of some elements because this solved the problem for posts with the same issue but could not find it... Thank you for any suggestions..
Edit following meta tag in your head:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
and following css:
body{
max-width:100%;
}
.navbar-default{
max-width:100%;
}
Related
A weird problem occurred today. While testing a simple "coming soon" page my background image on my iPhone X is not filling the entire viewport when rotating to landscape. Tested in Chrome and Safari.
A simplified example that produces the problem:
html {
background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
background-size: cover;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
</body>
</html>
As you can see in the browser it renders fine. In portrait, it renders fine. In landscape not so much. See screenshots.
UPDATE: Cannot reproduce this on an iPhone 7. Just the iPhone X.
I found the solution and wanted to post it in case anyone else has this problem.
The iPhone X has the notorious notch and home bar. Apple doesn't want content to be covered by those items unless you explicitly tell it to. To achieve the desired result you can remove the whitespace by simply adding the following to your style declaration.
CSS:
html {
// your css to create a cover image
padding: env(safe-area-inset); // <- this is the missing piece. Add it.
}
And updated the meta tag to include viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
The padding tells iPhone X to add the necessary padding so the actual content is not covered by the notch and home bar.
The viewport-fit=cover tells the browser to extend the viewport "under" the notch and home bar.
I hope this helps someone!
If I have something like this:
.div {
width: 105vw;
}
It won't go past the browser window. Instead, it will just make the browser wider. Does the same thing when I use a media query with max-width of 475px and I set the width to 600px. How do I get it to go past the screen? I am trying to do this:
// Make the div go past the screen on both sides
.div {
position: relative;
width: 105vw;
left: -8px;
}
And that seems to work on desktop, but not mobile.
Edit:
Viewport:
<meta name="viewport" content="width=device-width, user-scalable=no">
The issue is that the iPhone browser is zooming out to fit the entire contents of the page by default. The solution is to replace the <meta> tag with one that sets the initial scale, like so:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
I have an element that is fixed to the top of the page, and scrolls with you when you scroll horizontally, the CSS is quite simple:
.thing {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background-color: #CCCCCC;
text-align: right;
}
You can see the it here: http://jsbin.com/cetutaxaju/1
Works fine on most browsers, but with Safari on iOS 8 this bar is not 100% of the viewport, but 100% of the content?! (it was fine on iOS 7)
The culprit seems to the meta viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
As you can see when I take them out: http://jsbin.com/cetutaxaju/3
Does anyone know why this is happening, or even better how to fix it?
I need the viewport settings to remain as the real site does not work well without them.
Have you tried adding user-scalable=no to your meta viewport settings? i.e.:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
I had a similar issue and that fixed it for me.
I build an html landing page, you can see it here
I used the meta viewport tag in that way:
<meta name="viewport" content="width=device-width">
When I enter to this page from the mobile, the page width that not fit to the screen,
Iphone example - http://mobiletest.me/iphone_5_emulator/#u=http://tzabar.exactive.co.il/
what I've done wrong?
As per War10ck's suggestion consider changing your viewport meta tag to something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can also make changes in your CSS to help you along. Consider changing the .content class. For example:
.content{
width: 100%;
max-width: 930px;
}
I'm not sure what your ultimate design goal is, but that should get you moving in the right direction. You could also look into something like Bootstrap http://getbootstrap.com/ to help you make sites responsive.
Firstly, follow the good advice from jmadden and change your viewport tag to something like
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then at line 54 of style.css you have:
.content {
width: 930px;
margin: 35px auto;
}
You need to remove that 930px width or override it with media queries because at narrow viewports it's preventing your page layout from collapsing.
Hope this helps
i'm making page http://www.rhemapress.pl/www_physis/index.php?id=1. As you see header background is on 100% width (orange). It's first element in <body>. Code for this is: <div id="header"></div>. And CSS for this element is:
#header {
width: 100%;
height: 174px;
background-image: url("img/top-line.jpg");
position: absolute;
z-index: 6;
margin: 0px 0px 0px 0px;
}
It's ok on Safari on Mac. When i use Safari on iPad, header isn't set correctly - it's not 100% width.
Where's the problem? Could you help me with it?
I'm betting after looking at your code that you need the meta viewport tag..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
try adding
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to your <head></head>
Thank you all for answers. I think it's not possible to do this correctly, but if I in mistake then respond this with correct answer. I moved #header background to <body> in CSS and set repeat-x. Now it's working correctly but it's does not solve the problem with 100% width of element on notebook and mobile device (ipad).