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.
Related
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 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 am altering a site to be mobile optimised. I am currently testing on an iPhone 5C whose screen width (in portrait mode) is 640px.
However, when I set my sites #wrapper to width: 640px; the site only takes up about half of the screen. I have to set it to width: 1000px; for it to fill the phones screen.
#wrapper is the parent element of all elements so there is nothing on the outside of it to push the site outside of 640px. There is also nothing within #wrapper that is larger then 640px and I have set overflow:hidden just to be sure.
Would anyone know why this is occurring and what I can do about it?
The Media Query I am using is:
<link rel="stylesheet" type="text/css" media="screen and (device-aspect-ratio: 40/71)" href="css/ios5.css" />
you must insert this tag into your html HEAD tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The reason is clearly explained here.
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 */
}