I have this very simple CSS layout, which will restrict the body width and center it on the screen:
body { max-width: 38em; margin: auto; }
I expected this to be perfectly responsive: On huge screens the lines will stay short and the body centered, on small screens the body will take hold of all of the screen it can get. This works in my web browser's "Responsive Design View". But on mobile devices, the page is displayed as if it was a huge screen: Tiny text, big margins on the side. How can I tell mobile browsers to stop behaving this stupid?
You need to specify the viewport width when working with mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1">
Read More: MDN
Related
When my website (www.missnisaa.com) is launched on mobile the page is zoomed in. The user needs to pinch in order to get the right scale. How do I get the right scale on launch?
I have tried changing the initial scale, maximum scale and minimum scale to various numbers to no avail
This is the current code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
I have also tried changing the css. Current code:
/*------------------------------------------------------------------------------------------------------*/
/*Mobile*/
/*------------------------------------------------------------------------------------------------------*/
/* Portrait and Landscape */
#media only screen
and (max-width: 768px)
and (-webkit-min-device-pixel-ratio: 1) {
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none !important;
}
The page is always zoomed in regardless of mobile browser. I have only tested on iOS as I dont have an android phone to test on.
You have width: 768px !important; in the CSS rule for body (in a media query below 768px). So your content will always be too wide for smartphones, which is why your iPhone obviously zooms the too-wide body to fit it into the screen. Just remove that - the default auto width is 100% which is what you need for a responsive website.
I removed that line and nothing has changed with the exception on safari and the banner image and text are now squashed to the left.
I also tried
width: 100% !important;
but that doesn't work either.
I have a very strange situation where the current pixel width shown on chrome dev tools is different to what's displayed when I right click on the body element and see the full width of the body element.
For example I am using
#media screen and (min-width: 992px) {
.card {
max-width: 356px;
}
}
However what I find is that this style is applied when the pixel width is 1240px (as shown on dev tools).....however the body element is 992px. What could be the cause of this?
I've put this metatag on my header in the html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edit: https://codepen.io/anon/pen/YQXGgg
Break seems to work on codepen browser but not when I run it locally :s
I want my page to be non-responsive. It's about 1000px wide. I want it to appear in totality on my smartphone, so that the user has to zoom in to read normal sized characters.
Yet no matter what I do, I always have hundreds of pixels on the right of the main content when viewed on smartphone. I tried to set width: 1050px to a "wrap" element containing my whole page, same result. Right now my body tag is set to width: 1050px, same result.
I tried without viewport tag. Then I tried with <meta name="viewport" content="width=1050, initial-scale=1">.
Ideally on a smartphone I would want the page to appear horizontally centered with some 30px padding on each side, with no possibility to scroll horizontally. How to do that?
use
body {
overflow-x: hidden;
}
and change the meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1">
I am developing a mobile version of my website but I'm encountering some strange behaviour when rotating my device (iPhone). It looks and works fine when rotated to landscape orientation, but when rotated back to portrait, although the content adjusts, the viewport stays stuck at the landscape size. I have two login input fields that are set to 100% width on the page so that they are able to stretch to fit width on rotation:
input {
clear: both;
box-sizing: border-box;
width: 100%;
padding: 18px 10px;
}
These input elements seem to be part of the problem because when I change them to auto, the rotation behaves properly. Does anyone know how I can fix this behaviour, as well as keeping the form fields' fluid width intact?
FYI, The viewport is set as follows to allow for a fixed, scaled design:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have thoroughly looked on StackOverflow for a solution but none of the solutions in other posts work, whether it be changing the meta viewport attributes, using javascript or changing the media queries in CSS. Any help would be much appreciated.
Contain the inputs within a parent div and create a CSS rule of overflow: hidden; for the parent div.
See the fiddle I created below (on iPhone of course) and let me know if it works!
http://jsfiddle.net/g54pm/3/
I have created a responsive site with Twitter Bootstrap, however when I view the site in a screen resolution of 320x480 a horizontal scroll bar appears as the website seems to have an extra 20px-30px width. You can see this by scrolling too the right horizontally.
I have inspected the elements that form the page, however I can not work out what is causing this extra width - ideally I do not want any horizontal scrolling at the 320x480 resolution.
You can view the problem by changing the resolution to 320x480 in Google Chrome after inspecting an element.
Here is the site:
http://www.bestcastleintown.co.uk/wp/
It's the .jumbotron and .footer css rule margin-right: -20px; causing the problem.
Did you enabled the Bootstrap's responsive features?
http://twitter.github.com/bootstrap/scaffolding.html#responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Please note that bootstrap-responsive.css must be included and referenced on your website
Hope this helps.
You could try resetting lateral margins from -20px to 0 for header and footer tags
try this:
.footer{
width: 85%;
margin: 0 auto;
/* other css properties */
}