I am really struggling to understand why the portrait mobile version of my website scrolls way left!
I have removed the header image which is quite large but the width still scrolls of to right of the screen!
I have applied the common viewport code in my head tag and played around with css widths but to no avail.
There should be no scrolling left or right on the mobile version of my site.
Any clue as to what element/#media set-up is causing this width issue with the mobile css?
danieltuffour.com
Many thanks!
From a quick glance at the developer panel, you're using min-width:900px right now, which always keeps a width of 900px, regardless of what the width tag is set to. The easiest fix is to do the following:
#mediacontainer {
min-width:100%;
/* other css... */
}
This way, the content will always be 100% the width of the viewport. Now, another alternative would be to set a max-width on the element which would prevent it from overflowing the screen:
#mediacontainer {
width:900px;
max-width:100%;
/* other css... */
}
This method allows you to specify 900 pixels, but prevents it from displaying that way if there aren't 900 to use.
Related
For a while now, I'm facing a problem with height: 100% (or 100vh) on Chrome for Android.
Here, I have a page, and a blue div with height: 100vh. The yellow block has height: 50vh.
When I scroll down, the address bar goes away, which makes the viewport size change! So everything that was based on that, changes, too, as you can see here:
.
Everything increases 55px, which is the exact size of the address bar. This is so annoying.
I temporarily fixed it by height() on load, but it is jQuery, so it makes my website unnecessarily slow.
How do you deal with it?
Unfortunately, there's no satisfying way to deal with this today. The good news is that because of that, I've changed this behavior so that 100vh is static and the size of the viewport when the URL bar is hidden (matching Safari). See the Chrome Bug for details. This is currently in Canary channel and would ship in M50.
There's an unfortunate detail: height:100% refers to the viewport when the URL bar is shown but 100vh fills the viewport when the URL bar is hidden (See my explainer for more details)! I did this for compatibility with Safari but we're looking at ways to make this more rational so the M50 target may slip in preference of shipping something more sane.
In the mean time, if you can't wait and you want your page elements to remain statically sized, I'd recommend explicitly sizing a position: absolute box as your root based on window.innerHeight and using percentage based heights for the children. It's not ideal but hopefully will get better soon :)
UPDATE: This is shipping in Chrome M56 - you can currently try it out in Beta.
I have been working on this for days now. Looking through countless articles and trying a lot of different ideas that I have had.
All I am looking to do is have a background image or element that is 100% of the browser height.
The problem is that whenever the address bar shows and hides the available space changes and the picture resizes causing an annoying jump.
I am using a full screen image slider called maximage 2 (http://www.aaronvanderzwan.com/maximage/)
First I tried to make the html or body containers aligned to the top and 120% high so that when the address bar goes away it will still cover. But the image still resizes as 120% of the new size is still different.
I have also been trying to store the original browser height and then adding to that number to compensate for the address bar and resizing the slider to the new size.
I was thinking in the way of using device aspect ratios and taking into account something that stays fixed such as the width, but this would vary from device to device and not be reliable.
Does anyone know of any simple and clean ways to simply cover the background of a mobile device with an image slider without using a percentage that will resize?
I had the same problem. The solution was to set the background hight to window height via jQuery and block the resize event while the scroll event is active.
That way you can scroll let the address bar disappear and have no nasty resize jump happen.
https://stackoverflow.com/a/31546432/1612318
I'm working on a project where I have a stationary bar (to become nav bar), and then directly below it is a rectangle which is setup so that when you click it, it flips over. The width of both the nav and the flipping div are supposed to be the exact same, and they are when viewed in FF, Chrome, Safari, IE...but when I just checked it in the Android browser, the flipping div is about 10 px less in width than the nav bar. I've narrowed this down to the fact that I'm using 'display: table' in the div 'outerContainer' to vertically and horizontally center the contents of 'innerContainer' (which is set to be display: table-cell). This is an example of how I currently have it setup, which displays correctly in all browsers but the width of the flipping box is less in Android browser: http://jsfiddle.net/adRP4/9/
As soon as I remove the 'display:table' from .outerContainer, it displays in the Android browser at the proper width, however the content is no longer centered as I want it. This example shows the display: table removed will the proper width displaying, but the content not centered as I want it: http://jsfiddle.net/adRP4/10/
The vertical/horizontal centering method I used is based on: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (similar to http://css-tricks.com/vertically-center-multi-lined-text/) ... when I tried changing it to the method outlined her: http://css-tricks.com/centering-in-the-unknown/ I ran into all kinds of problems...
Any suggestions on how to fix this?
UPDATE (6/28)--I discovered that when I check an iPhone, I have the exact same width mismatch as in the Android browser..
Thanks,
Mark
I'd suggest to use a DIV for the flip, and then, adding a div filling the flip and set as TABLE.
Or I suggest using the floater in the method 3 here : http://blog.themeforest.net/tutorials/vertical-centering-with-css/
My biggest annoyance with browsing websites on my Android browser is reading text with indented blockquotes. Android's webkit implementation (correctly, in my opinion) sets the width on any text element to the browser width.
However, this means that list and blockquote elements which have left margin or padding applied to them hang over the right edge of the visible screen. This makes for annoying reading experience, as the user has to be constantly scrolling right and left to read.
This behavior is visible in just about any site viewed on Android, and my feeling is that this constitutes a bug in the browser.
But my question is: does anyone have a good css solution to preventing this issue? I've tried wrapping all body text in a block-level element with max-width: 100%, but elements with left padding or margin still hang off the edge.
You should be able to fix that by setting the box model for the div/p/li etc.
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
I have a page that has a 100% width and height div in it (all surrounding elements are sized accordingly so that it does actually achieve 100% width and height). Below that div I have a second div with a fixed height.
In mobile safari and blackberry everything is fine, when the page loads the dimensions are applied correctly (the top div filling the viewport) and the user can scroll down to reveal the second div. Android 2.1 also applies the dimensions correctly, but with an added quirk; when the user scrolls down and removes the address bar from the page, the dimensions of the div are recalculated to fill the viewport, causing the content to jump. Ideally I would like the dimensions of the div to remain static when the page is scrolled, but remain 100% so that it will fill the viewport regardless of device size or orientation.
Does anyone know of any way to disable this recalculation?
Thanks for any help you can provide.
The only thing I can think of is to have a Android 2.1 specific negative margin the counters the address bar. Target it by user agent.