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.
Related
I've never come across this before. I just built a single page layout website for a client. It works fine on computers, but on tablets or mobile devices it just doesn't scroll.
There are menu items which trigger some jquery and scroll down to to the appropriate content when clicked - something I use often with no problems. These work on devices, but you can't use your finger to scroll.
The site is here: http://marcdeguerre.com/
I do have my html, body and other tags set to a height of 100%, thought that might be it. So I set them all to a height of auto when the viewport is below 767px wide. To no avail.
I changed all my background-attachments from fixed to scroll at that break point too. Didn't help either.
Has anyone come across this before?
Thanks a lot for any insight you may have!
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
Had spent many hours try to figuring out what makes content wrapper not working.
The site is here:
http://bit.ly/19dWUf
html structure contains header, content and footer.
Its looks good when accessing using firefox, google chrome in dekstop by resizing the window to emulate mobile view.
The problem
When accessing using mobile devices the content section is right aligned, header n footer looks fine.
since it looks good on firefox and usually use firebug to debug,
it's hard to find what makes problem in real mobile device.
i m using Opera Mobile emulator to check the display..
any opinion appreciated. or is there any firebug/similar tools for testing mobile?
Thank you
Your section#content-wrapper gets margin-left and margin-right of 30px upon page load.
Either remove
jQuery('#content-wrapper').css({
'margin-left':'30px',
'margin-right':'30px'
});
from jquery.custom.js (line 332), or change it to
'margin': '0 auto'
I wrote a website but I have a bug in it, when I resize my browser my website resizes with it. I have noticed this in Firefox (10.0.2), Chrome (16.0.912.77) and opera (11.60). I tested some other websites omgubuntu webupd8 and when I resize Firefox it still looks good (it doesn't resize with the web-browser). I would love to post images but I need 10 reputation for that.
Using CSS, apply a width (such as 1000px) to your <body> and add margin: 0 auto; to centre the content. You'll have to bring the width of your navigation links down and re-position the ads, but this will stop your site from 'resizing' with your browser.
I strongly suggest using a good CSS Framework. Two good options are:
http://960.gs/
http://blueprintcss.org/
They provide you a fixed width layout as well as an easy way to divide the column into grids.
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?