Currently developing this site and I can't pin point as to why there is a horizontal scroll bar and a huge amount of white space added in opera.
http://thefinishedbox.com/ - If you have Opera browser you (should) see what I mean.
Theres no additional space added in other browsers.
Anyone know why this is?
P.S this css file is designed for higher resolutions so you will automatically see a scrollbar on 1024px width resolution monitors.
The site seems to perform ok in Opera (OSX) however I am replicating the issue with the x scrollbar I wonder could it be to do with the min-width and width tags? to rectify you could hide the x overflow?
Related
I ran into a following issue. I have a popup dialog with a scrollbar. In Google Chrome it has space reserved for a scrollbar. However, Firefox does not reserve any space for a scrollbar, so when it appears, it can overlap content (see screenshots). Probably it is somehow related with the fact, that firefox hides scrollbar unless you hover scrollable area. Could you suggest any solution to make firefox reserve space for scrollbar the same way as Chrome do?
Screenshot in Firefox
Screenshot in Chrome
Really great question! Unfortunately, As far as I'm aware, there is no simple solution to this problem. I would recommend creating a design that looks good with or without the space differences that the scrollbar creates.
But if you are dead-set on creating a more versatile solution, you could change the scrollbar using Javascript/Jquery (See this answer:Custom CSS Scrollbar for Firefox), or you could try and detect the browser, and accommodate extra padding for elements with scrollbars for users using Firefox(See this answer: How to detect Safari, Chrome, IE, Firefox and Opera browsers?)
I have a bilingual site with two versions Arabic and English. In Arabic version on <body> I have applied style="direction:rtl" . This is causing an issue to a horizontal scrollbar. When I resize the screen to minimum resolution or zoom-out the screen the scrollbar not appearing seems like overflow-x: hidden property is set to it. I tried to overflow: scroll but it's not working. Anyone can please help.
This is a bug in Firefox, if you try it in Chrome it works.
You've just met Bug 992384, probably (another) regression of Bug 192767.
They're working on it, stay tuned ;)
Dropbox recently updated their website layout where the first div occupies 100% of the window size and vertically centers the content irrespective of the browser height.
I am trying this layout for my own website. However I noticed when I open the website in chrome on my mobile on scroll there is an initial jump and then the page seems fine.
How do i get rid of this scroll jump?
You can check the same by visiting the Dropbox website on you mobile (Android or iOS)
[UPDATE] This happens when you scroll and the address bar hides.
This is the best solution (simplest) above everything I have tried.
You could set the height with CSS to 90vh for example, and then set the height to 0.9 * of the window height in px with javascript, when the document is loaded.
For example with jQuery:
$("#element").css("height", 0.9*$(window).height());
)
Unfortunately there isn't anything that works with pure CSS :P
See: This S.O. Question
I'm having issues with some strange padding on the right side of this website I'm working on right now. I'm currently viewing it on a 13" Macbook Pro, full-screen within that viewport. (It has a lot of issues on the smaller viewports that I'm aware of; I haven't gotten to that point in the process.) I've inspected it thoroughly with the developer tools in Chrome but haven't been able to find anything to account for the padding-right or margin-right that's creating the horizontal scroll.
It's currently built with Bootstrap and Flexslider.
Link to repo: https://github.com/helenvholmes/designshow
Thanks!
The horizontal scrollbar also appears on Chrome 25 on my Win 8 64 system, regardless of width.
Try adding overflow: hidden; to the rules for div.flexslider.
That removed the horizontal scrollbar for me and appeared to leave everything else intact. However, please be warned that I haven't tested all the content thoroughly, so look carefully to see if that rule has other unwanted side effects.
How does that work for you?
I have a very simple website that creates a horizontal scrollbar in the following:
Android:
Chrome
Firefox
Opera Mini
Not in Android Default browser but the site looks broken
iOS:
Safari
It's really no big deal but I'm comparing my website to the full desktop site of http://google.com and Google's website doesn't get the same problem as mine.
I am still pretty new at CSS and HTML and I feel like I'm breaking some really simple rule I don't know about that is creating this problem. Any ideas on how to fix this?
If you would like to test it. Go to http://natio.in
The horizontal scroll bar is appearing because you have fixed width's set on elements, that when the site is viewed on a mobile browser, the width of those elements is set wider than that of the viewport width. If you use a percent for widths, your webpage will be able to adjust accordingly.
well, you can include overflow-x: hidden; in the styles for your body tag, but if there is content outside the width of the phone, you wont be able to get to it. Or you could crate a responsive layout with media queries.