I was inspecting my asp.net page in firefox and discovered that the main page container was 1116.9px instead of the 1024 that its supposed to be.
I couldn't figure out what was the cause so I made this test file:
<html>
<body>
<div style="width:100%;max-width:1024px;margin:0 auto;height:1000px;background-color:blue"></div>
</body>
</html>
and inspected it aswell. This one is even worse - 1428px wide. This only happens in firefox. Am I missing something really fundamental here? Whats going on?
This is dependent on the size of your window and device screen. For example, if you have a large monitor and maximize the window to fit the screen, it will enlarge the width. I have a dual monitor setup and I just dragged the window size from the corner to stretch over both screens. I then clicked the Resize tab form the Web Developer Toolbar and it showed : 2442px x 1009px ... However, you can click the Resize to 1024x768 (which is what the page is set to display at normally) and it will resize the window to fit it.
try this...
height:100%;max-height:1000px;
Related
I've got some problems with window height in mobile browser.
I'm using css 100vw but it's not always exact - especially when browser shows additional functionality - i mean navigation bar on top or functional buttons on the bottom.
In simple words - they've take away the size of the window but it does not refer to exact computed window size.
I'm putting videos for best reffer of what i'm talking about:
As you can see here - where i'm opening chat window the window height is changing during keyboard show-up - but window itself does not change the size - when i enter it second time - the window height is changing - how i can get controll over it?
Here when the bottom stripe is added the height of the chat window is ok - it's computed by CSS height:calc(100vh - px) and it's work
But when stripe is gone - window height remain the same - so the height is much lower
How can i get the height of the mobile window with additional functionalities of this window? (adress bar, function buttons or keyboard added?).
(Movies came from iPhone iOS - it's seems everything work's fine on Android)
Instead of using 100vw, try using 100%. Like this:
height:100%
I have a problem with my website.
When I resize the browser window or access the site from a device with a small screen, a white transparent box appears from the bottom of the page and grows bigger as I resize the window.
I have no idea where it comes from and can't find the issue in my code.
To see what I am referring to, try scrolling down to the bottom of this page: [redacted] and make the window smaller.
That looks like your full screen image shrinks too small as the page resizes. And when you resize, the solid background color becomes visible, appearing as like a box.
So you might need to use an approach that stops shrinking that background image when it gets to a certain point so as not to be smaller than the window-height.
Site in progress: http://www.modernfuture.net/wordpress
I've been banging my head against the wall over this for hours - when I resize my browsers width (by dragging the browser window's right resize handle) my site maintains that nice responsive centered effect I want for roughly 1/8th of my browsers window size. However when I drag the browser's right window resize handle from right to left past this point (roughly 1/8th the width of the browser window, when the browser window is taking up the full width of my 1080p screen) my site (header, content, and footer) stops staying centered and the resize handle crops over the site rather than maintaining the responsive centering that I'm looking to achieve.
I've tried applying the "margin: o auto;" trick to the body class and the wrapper class individually and simultaneously, but it doesn't yield the desired results.
I'm really at a loss for ideas here. Can anyone offer some insight please? Thanks!
You need to remove the width from body class and margin also need to set margin:0px;
I'm making a page to scale down to fairly small browser sizes, including on desktops. I've got it down for pretty much every browser but firefox; it just doesn't make the content smaller the same way as other browsers.
Say I have a simple page like this:
<body>
<div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>
If you try that in any browser but firefox, when you resize the window to smaller than 540px, the div gets smaller, as you would expect. But in firefox, it does no such thing. At least not in 8.0. It resizes the div a tiny amount and then lets it extend off the window, without even leaving a scrollbar.
Is there any way around this behavior?
EDIT: I've reproduced this is on older versions of firefox as well, but I found something odd. When I said it resizes the div a tiny amount, here's what happens: the body of the page stays at 367px width. Two different versions of firefox, two versions of windows, the same number.
The issue you're running into is that in Firefox depending on the exact themes or extensions in use as you resize the browser window the browser content area may not resize (because, for example, the various buttons on the widest toolbar impose a minimum width on that content area due to the way the user interface is laid out).
This is why you see the body not changing size: the CSS viewport itself is not changing size. If your page had a vertical scrollbar, you'd see that scrollbar disappear off the right edge of the window, just like parts of the browser UI itself disappear.
You can work around this with enough toolbar customization (e.g. remove everything from the toolbars) if you just need this for testing. On the other hand if you just need this for testing you can probably jut load the site in an iframe which you then size however you want...
Wanted to say something about your comment regarding "width: auto" vs "width: 100%" but I can't comment yet...
You can set "width: 100%" and make it account for padding and borders by also setting "box-sizing: border-box" - you'll need to use the vendor prefixes I believe -moz- and -webkit-. Not sure if it will solve you problem, but it's good to know - maybe try it out and see what happens.
When viewing the following test page with the browser in the BlackBerry 9630 simulator, the text width is wider than the screen width. So, when zoomed to 100%, one has to pan.
http://sites.inka.de/klee/blackberry/text.html
What solutions are there to make the text wrap to screen width?
The browser has a default width for the window, when you zoom, the window keep it's full width, so every website will have this problem.
You can't fix this, since it's an expected behavior.
If you don't want your user to zoom on your website, make the font bigger.
Found the solution:
<body style="margin: 0">
With the default margin, after loading the page, the cursor has the shape of a magnifying glass, allowing the user to zoom in, etc.