The width of my page is too wide, so that you can scroll to the right and it will pass all the page elements. Here's a screenshot:
The black part is the footer, as you can see, you can scroll right past it.
I have used overflow-x: none; to prevent horizontal scolling, however you can still scroll this way by holding down the middle mouse button and scrolling.
How can I confine my pagewidth? Setting it to 100% will make it native to the screen's resolution; however for some reason it has gone past that. Thanks in advance!
If I have understood you right, you should be able to do this in your css:
body {
width: /*the width you want*/;
}
I maybe understood you wrong or maybe I didn't!
Edit:
Try adding this to your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
So i have a ridiculous problem, that ought to be obvious and simple yet I can't seem to find out what the problem is.
I have a div on a page that uses bootstrap.
The code for that div is as follows:-
.appSection{
background-color: #000000;
padding:20px;
border:1px solid #67c1dd;
margin-bottom: 30px;
display: block;
width: 100%;
min-height: 450px;
}
Its a child of a div wrapper col-md-12.
This display fine in most browsers I've used; however, when the div does not contain much content or text at the head of the div, on the iPad the div collapses as shown in the right side of the attached image. Sometimes it can literally be collapsed almost completely to the right of the underlying menu.
Any clues?
You haven't given us enough information to go off. If we could see a sample of you html and css that would be great.
If you are reviewing it on iPad in portrait, then your "col-md-12" class on the parent div is not being applied, as that starts at 992px. That is probably 'part' of your problem. It's not the root cause though. but with nothing else to go on, try changing it to "col-xs-12" and see if that fixes it.
I've found the problem.
I had this meta tag at the top of my page, when I removed it, the problem was resolved:-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I'm working on http://preview.j64e7zzvo82p4x6r4fdjze6piimmfgviwsruf9j89pidaemi.box.codeanywhere.com/ and have nearly finished making it responsive.
But for some reason when the browser is sized to anything below 991px in width then it creates whitespace on the right side. All of the content will snap to the screen size but at the end of the day you can still scroll to the right and see a big black background because of all the whitespace.
I thought it was the images on the size that were to big for the viewport but even after removing the images, adding the img-responsive class to the images, and other attempts to fix, the site still has this problem
What is causing all of this whitespace?
The rule for #ctaButtons has a fixed width. Try replace it to auto:
#ctaButtons {
width: auto;
height: 120px;
padding: 20px;
margin: 0 auto;
}
Adding this fixed it for me - you are missing the viewport code from what I can see - for example:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
You can read more at - the third paragraph down http://getbootstrap.com/css/
edited, actually I must have tried that while you applied you fix... I'd still put the viewport in though!...
Try adding overflow-x: hidden; to your container <div>.
I have tried wording this question in many different ways on Google. I have found one result with a similar question. The response was that the question was too vague. This will be my first question, I'll do my best to try and be as detailed as possible.
The very page that this question is being asked on has no scroll bar at the bottom, suggesting overflow-x:hidden was used. However when clicking on the restore down icon at the top right of the page, left of the close icon, you will notice that the x or left to right scroll bar is now present. This is the effect that I am trying to achieve. How do I write my page where it has no left to right scroll bar until minimized?
Here is the code that I have in CSS:
body {
overflow-x:hidden;
overflow-y:auto;
width:1650px;
max-width:1650px; background-image:url('LiraBG5.png'), url('LiraBG3.png');
background-repeat:repeat-x, repeat; height:100%;
}
For HTML:
<!DOCTYPE html>
<html>
<head>
<link href="Lira.css" rel="stylesheet" type="text/css" />
</head>
<body id="body">
</body>
</html>
I have tried overflow-x:auto; in place of overflow-x:hidden; however this results in the page having an x or left to right scroll bar when maximized which is what I am trying to avoid. Is it possible that it may require JavaScript for this effect?
You don't want overflow-x: hidden - that won't give you a scrollbar. Remove that from the body and try something like this (run the snippet and click "full page" to see it in action)
#content {
width: 1000px;
margin: 0 auto;
background: #aaa;
}
<div id="content">Content here</div>
This tells the div to fix its size at 1000 pixels wide, and margin: 0 auto tells it to centre itself horizontally if there's room. If there isn't room, you'll get a scrollbar.
The HTML element of the document, by default, has overflow: auto. This causes scrollbars to appear when the content within the document extends beyond the boundries of the browser window.
In the case of this website. There is a centered div which has a width of 1000px. When the browser window width is reduced below 1000px then the overflow on the html element will display by default.
As a side note:
Many modern websites are built with a responsive framework (eg. Bootstrap). These responsive frameworks ensure that all content is visible within the viewport regardless of the window size and therefore remove the need for horizontal scrolling.
I am doing a small tutorial on responsive design, but I have a problem.
I am going with the classic off-canvas menu swiping in from the left side, but when I enable the menu I can still scroll horizontally to see the full content, rather than using the menu-button to hide the menu.
See the following pen:
http://codepen.io/webconsult/pen/jmCit
Note that codepen hides the tag. For the meta viewport tag I am using:
<meta name="viewport" content="width=device-width, initial-scale=1">
I am suspecting that I should set up the the viewport tag differently?
You can play around with the viewport tag by clicking on the settings-cog in the html frame.
Add this to your css
body {
overflow-x:hidden;
}
you have
.site-wrapper {
width:100%;
}
according to your css on larger screens the main content occupies 100% of width. On smaller screens when you open your off-canvas menu - it produces horizontal-scroll because your .site-wrapper+off canvas occupy more than 100% of width -100% for warrper + 75% aside.navigation.
By adding overflow-x:hidden; on body it will the scroll-bar.
This is not the best solution though - having
.site-wrapper {
overflow-x:hidden;
}
is better but something is up with your header -behaves a little wierd when i add this property.
I'm working on a web app that works on the desktop as well as in a cell phone screen. However, when I view the app in Safari in the iOS simulator, the page is actually slightly wider than the screen of the simulator even though this tag is in the HTML file:
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, initial-scale=1.0">
Any idea what might be causing this?
Try to use any developer tool to inspect the page. I'm sure you will find some div in the page that overflow horizontally. When you find it, try to set the width to 100% in your media queries also remove right and left padding and margin to the element. That should fix it.
Giorgio is right. Also you can check if you have any span elements floating right or left. Make sure this span is within a div then implement an :after css to clear the float.
Like this:
.DIVCLASS:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Hope this helps!