so I am making my first website in WP using Divi Theme and suddenly this horizontal scrollbar shows on 14' screen that hasn't been there before. When I view it on tablet or phone or 17' plus screens there is now scrollbar at all. I am not aware that I have done anything particular for it to be displayed. I tried to check width settings, but it doesn't seem to be the real issue. My website is https://vonofit.cz/en/home/ also as website screenshot I would really appreciate any advices as I am beginner to this. Many thanks anyone.
Jan
This is occurring because something is making the page container larger than the browser window, which makes the scroll bar appear so the user can scroll to see the excess space. I didn't identify what is causing the issue, but an easy fix would be to add a line of css to the stylesheet that will make the page overflow hidden. Something like this should work:
div#page-container {
overflow:hidden;
}
Related
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.
I'm having trouble with my website here: (solved)
The problem is that when I make the window too small the content starts moving around. I'd like to make it so that it stays in one place even when the window is re-sized.
I'm using a wordpress them so something must be interfering with what I've already tried but I'm not sure.
I've tried making a wrapper around everything, and giving it a min-width, it still fails to work. I've also tried setting the position to fixed of this wrapper, the main content, and the sidebar, which also didn't work very well.
I'm kind of stumped as to what it could be. If anyone could help me out, that'd be great.
Thanks!
Its the media queries that are causing the problem. All of your site is trying to fit in one column if there isn't enough room for it side by side but the fixed sidebar is messing with it. Disable the media query or apply styles for the sidebar to become display: block; below the width set and it should be fine.
Starting on like 871 of the stylesheet there are media queries that change the style of the page based on the width of the browser window. You can either delete these or restyle them as you would like for tablets, phones, etc…
I have created a drupal theme, URL: http://sundancefoundation.org/
There is a small shift in the layout when we switch between home page and about us page.
This is working fine in firefox only, all other browsers are showing this shift.
I know this is a CSS issue, but not able to fix it.
Any help is appreciated.
Thanks.
The About us page is shorter than the screen height and therefor has no need for the scroll bar on the right hand side of the screen. The home page is longer and has a scroll bar. When the scroll bar appears or disappears it looks like the screen is shifting but that's all it is.
This css rule will simple fix the body width flickering issue:
body {
overflow-y: scroll;
}