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!
Related
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;
}
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.
When I browse my website on computer, everything looks fine in all major browsers, however, when I check it on Android phone there's a massive gap below footer. This happens only in portrait mode and in all android browsers. When I view it in landscape mode, the gap disappears in all browsers.
I tried 'playing' with viewport meta tag, but it doesn't help.
My site's width: 1300px and height:100%. Also, footer has padding-bottom:0; margin-bottom:0;
What could cause this problem to happen only in portrait mode?
Update: It seems that the height of a page isn't large enough to fill entire screen of my mobile so there's this gap. When I browse the page it's completely zoomed out according to sites width. How to make it zoom in according to site's height instead and thereby eliminate the bottom gap?
Please help
P.S. Unfortunately, I cannot provide you link to the site as it's on a local server.
Ok, guys. I managed to fix it. Probably not the best fix in the world but better than nothing.
So what I did was forced minimum zoom by using viewport minimum-scale=0.6.
No bottom gap after this fix.
I'm banging my head against a wall with a coding problem. I've developed a website with a large background image to allow scrollable content.
The page appears fine on most browsers, but on the ipad/safari, this browser presents the full background image in the viewable area, not just the native resoltion of the background image as per the ther main borwsers.
It's important I keep the image background and allow it to scroll down as some pages on this site will be lengthy. Any ideas would be much apporeicated!
Thanks in advance!
Preview of layout page: http://websiteworkpreview.com/test/index_test.html
The homepage is index.html (for reference) - Homepage uses different bg image. No problems there...!
Error screnshot of background in Safari on iPad: http://websiteworkpreview.com/test/2.JPG
Mobile Safari has had some issues with image filesize, and some known limitations. Take a look at the discussion in the link below. It shows an example that looks very similar to yours, where the image is being cropped vertically, and some specs as to the limitations. Even though it is referencing using an iPhone, it would, of course, affect an iPad as well, as both use Mobile Safari.
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
I'm currently redesigning a website and have run into an issue with horizontal scrolling when the page is viewed in a narrow browser window.
The header contains a logo, some text and a navigation bar and spans 100% of the page width, but the header content is centered with a fixed width of 940px. When shown properly, it looks like this:
However, if the browser window is resized to be narrower than the fixed width a horizontal scrollbar appears (as expected), but scrolling it 'cuts' the scrolled part out, producing the following result:
The work-in-progress site can be viewed live here, if the CSS/HTML can give you any hints as to what I'm doing wrong.
The easiest way to fix this problem is to add min-width:940px to the body tag and use an expression for ie6.
It works fine for me in Firefox 3.6.8, IE 8, and Chrome 5. What browser are you using? Looks like you are using Chrome.
Is the page being cached in your browser incorrectly? Try clearing your cache and then check the site, or try viewing it on another computer. The CSS for the header is straightforward and correct. Nothing there should be causing problems.