Extra horizontal width on responsive site when viewed at small resolution - css

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 */
}

Related

element dimensions differ in chrome dev-tools from those set in css

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.

How to disable responsive grid in Foundation 6

I'm currently developing a responsive website with the new Foundation 6 but I can't seem to find how to disable the responsive grid (I need to make it optional for the customer) by the tutorials for version 5.
Thank you very much.
Remove this meta tag from header.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You also have option to use Responsive Switch by filzhut.
Remove the styling for the row, column and columns classes.
Add this css code block to the header after the foundation css links on each page you desire to remove the grid styling. Or, you can include the style in your foundation css file at the bottom:
<style type="text/css">
.row, .column, .columns { margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; position: static !important; width : auto !important; max-width: none !important; clear: none !important; }
</style>
Here is what I mean by adding the style to the bottom of the foundation.min.css file to remove grid styling. Also, this means you will have to host the css file locally and not use a cdn.
Now, as for giving your customer a choice of grid or no grid, you can show them two dev sites, one with the grid and one without the grid. Or, you could put a button or some element on the page and use js to add and remove the css or an element in a form to do it with a server script. In your question you referenced:
by the tutorials in for version 5
I didn't find any tutorial for f5 with a switch for the grid css, provide a link and I may update this answer.

How to make centered fixed width body responsive?

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

Can' t scroll on my web page

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.

Viewport scaling is breaking when rotated back to portrait

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/

Resources