I am creating a website under experimental.danielhons.de and have a problem when looking at it with small devices, like mobile devices or reducing the width of a browser window.
At some point, the page gets horizontally scrollable and on the right there is a whitespace.
Using Firebug, I see that it is the body-tag exceeding the screen, but I have used this css:
html, body {
max-width: 100%;
overflow-x: hidden;
overflow:hidden;
}
How can I prevent the page from being horizontally scrollable? Screeshot with overflow:auto
Add this css
body {
height: 100%;
overflow: auto;
}
html {
max-width: 100%;
}
I can clearly see that you have overflow: scroll; set on your body tag.
You can override only the x-axis specific rule by using overflow-x:hidden;.
Related
Is there a way to only enable scrollbar on the body only and disable on other divs?
This code disables all scrollbar in everywhere:
::-webkit-scrollbar {
display:none;
}
How to enable only on the body?
EDITED
Changing overflow is not the one I want. Let's say I want to create mobile friendly view editor, which able to scroll up and down inside the div content but the scrollbar should be hidden. The scrollbar in the body is necessary because I will have to edit the view from my desktop web browser.
Changing overflow will not help in this case.
These two CSS properties can be used to hide the scrollbars:
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
}
jsfiddle: http://jsfiddle.net/5GCsJ/954/
I've been trying to code a website to have the main section fill 100% of the screen on all devices (i.e. the logo, navbar, slider and quote fill the whole screen, then you scroll down and the next section is 'Contact Me'). On my laptop screen and iPhone 6 it looks correct, but on smaller mobile screens (and when I resize my browser to a small size) the 'Contact Me' section seems to collapse over the other content.
I've tried setting a minimum width on the div (as that's what many of the suggestions seem to be) but with no luck.
I've attached a link to the website, any suggestions would be much appreciated.
http://176.32.230.9/andycheckcheck.co.uk/homepage.html
You have this CSS rule in there:
.firstSection {
height: 100%;
width: 100%;
background-color: #EDF4ED;
}
Change height to min-height in there and add height: 100% to body:
.firstSection {
min-height: 100%;
width: 100%;
background-color: #EDF4ED;
}
body {
height: 100%;
}
If you don't want the words to collapse in the white space, I suggest adding a white-space: nowrap style to your h2 "Contact Me" element.
CSS:
.nowrap {
white-space: nowrap;
}
HTML:
<h2 class="nowrap">Contact Me</h2>
since iOS 7.1 when you scroll down a page the viewport size changes but that doesnt update 100vh is there any way to stop the minimal ui or update the viewport on scroll?.
example site http://goo.gl/Umbd47
I have included a picture of the problem below and one of how it should look.
If the scrolling element is not body, minimal UI should not activate.
Wrap your content in a div with overflow: auto and set your body's overflow to visible. Both body and the div must have their heights and widths set to 100%.
So your css might look like:
body {
width: 100%;
height: 100%;
overflow: visible;
}
#container {
width: 100%;
height: 100%;
overflow: auto;
}
My website works on a 15 inch laptop, but whenever I resize the browser, some of the information on my website 'disappears', as I am unable to scroll (scrollbar won't appear).
I'm experiencing this problem for two of my websites (they're part of a school project).
On the first website, the sticky footer covers the content when the website is being viewed in a smaller browser window. I managed to get a scrollbar for the container part (everything except for the header and footer), but I need the scrollbar to appear on the very right side of the website, outside of the container. (only the footer will be fixed, the header will be scroll-able as well).
http://sophisticateddesign.nl/cfreport/index.html
On the second website, I need the header and butterfly to stay fixed and for everything else to be scroll-able.
http://sophisticateddesign.nl
I'm wondering if there's an easy solution as I don't have much time left for these websites to finish..
Remove overflow: hidden in html
html {
height: 100%;
margin: auto;
width: 960px;
}
Remove position: absolute for .Wrapper
For second site:
You added your main content inside header with position: fixed; height: 50px;. It's the problem.
Yeah I just tried this out if you need something to overflow the sides you should use
html{
overflow-x: hidden;
}
instead of using just overflow.
|| For anyone who encounters this problem in the future. ||
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
Try changing overflow to overflow: scroll
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
This div below is causing the page to scroll horizontally on smaller then 1450px browsers. I thought overflow would fix this issue, but does not appear to... may be something I need to do on the parent div's. Any ideas?
http://barr-display.mybigcommerce.com/
#Header {
position: relative;
clear: both;
width: 1450px;
min-height: 190px;
overflow: hidden;
background: url('/content/headerbg3.jpg') repeat-x;
}
On body you need the following
body {
width:100%;
overflow:hidden;
}
The reason your code is not working is that you're setting overflow on the child(#header) when it needs to be set on the parent.
Looks like you want three things:
No scrollbar when header image is cut off.
YES to scrollbars when main page content is cut off.
Ability for your header background to extend to the right if the browser window is wide.
You really needed to post more of the relevant code here. However, I look at your site, and this'll fix it:
Change your rule for #outer:
#Outer {
clear: both;
margin: 0 auto;
min-height: 190px;
width: 1024px;
}
Remove the margin and width rules from #outer's parent, and replace with width:100%;overflow-x:hidden;
Add these lines to your css:
html, body {
width:100%;
}
body {
overflow-x:hidden;
}
You need overflow-x so the vertical scroll bar doesn't disappear.
Also, remove overflow: hidden; from the #Header.