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/
Related
When I set a div-width of 200px and height of 200px in my css file, chrome dev-tools show those dimensions way smaller (about 150px x 150px) regarding the rulers.
div set width: 200px; height: 200px;
I've also set:
<meta name="viewport" content="width=device-width, initial-scale=1">
What is, I don't understand?
I got it!!
Maybe will help someone. Very easy. It seems to be a bug in chrome dev tools. Just switch on/off the dev tools while in your chosen screen device and the dimensions set in the css file will show up properly.
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
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 beginner in HTML/CSS and I come to one issue that is strange to me. Can't remember that I had this problem when started to learn. Nevertheless, the problem is that I can't scroll when I resize my browser window. Her is the code:
<!DOCTYPE html>
<html>
<head>
<body>
<img id="pic" src="http://0.tqn.com/f/lg/a154.png"/>
<style>
#pic {
position: fixed;
left: 1060px;
top: 150px;
right: 300px;
bottom: 658px;
}
</style>
</body>
</head>
</html>
I put position of picture on left and right because that is the only way that I know to fix image on one specific position. I tried auto, but the picture moves when I resize browser.
Thank you for your time and effort
Ok, the issue I think you have is that when you position an element absolute, it removes it from the flow of the document.
So think of it as if the absolute element is removed from the body of the page.
The body of a page is always 100% width of the browser. Your image is being positioned outside of the browsers view port.
you have two options. either do not user absolute positioning and use a css layout to get it the image in the proper place.
or you can set the width of the browser to the width that you need it to be e.g. 1200px
the first option is better for modern days and doing more future facing sites.
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 */
}