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.
Related
In this simplified HTML, I have a fixed div that is meant to be the exact width of the window. But there is also a very long word in the content above the div that messes up the layout.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style>
div {
position: fixed;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body><p>Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword</p>
<div><b>0%</b><b>25%</b><b>50%</b><b>75%</b><b>100%</b></div>
</body>
</html>
It looks as if the long word causes the "viewport" to stretch to be wider than the window, so the div (fixed to the viewport) ends up being wider than the window.
Now this only happens on mobile devices, even using Chrome Dev Tools. In Desktop mode, all is fine:
But change to Mobile and the fixed div stretches:
So two questions:
How can I prevent the div from stretching wider than the window?
What is Chrome Dev Tools doing differently when I switch to Mobile view?
1) I've managed to fix all the issues I can create with your code by:
p {
max-width: 100vw;
overflow: hidden;
}
2) Chrome does very strange things with the width of that div as I mess with the css and refresh the page. It does not render at all consistently even with the same css. In fact, I have two tabs open that show the page differently from the same code in the same file, even while refreshing. I think the behavior of a div when smaller than the viewport may be unspecified, and you must use something like my solution to tell Chrome what to do.
this problem is caused by justify-content: space-between. You dont actually set a width, and different things add different amounts of spacing.
If you were to set a width for the div like this: width: 300px, the width wouldn't change on mobile or pc.
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.
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">
I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.
I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.
I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.
Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?
I had the same problem, and applied this to fix it:
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
To expand a bit, I only had the problem on mobile phones, so this is my final code:
#media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.
i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.
The "overflow: hidden;" style is the remedy not the prevention.
If you want to prevent this you have to check your body elements which is larger than the body.
It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap).
So remove all padding and margin outside the container class.
It turns out I had zoomed in more than 100% that was causing the page to scroll. Cmd+0 helped bring the zoom to 100% which got rid of the scrolling.
Try to add (in the relevant #-rule) a max-width:
img {
max-width: NNNpx;
}
That'll prevent img from being too wide.