I've got my site content inside an 800px-wide div, I'd like that div to be centered on the page until the browser window width extends past certain distance. At that point, I'd like the content to "lock" into place and not continue to center itself, staying a fixed amount from the left edge.
For example, if the viewers window is 900px wide, then they will see my 800px content centered. If the viewers window is 1400px wide, they will see my content 400px from the left side, locked in that spot.
You might be thinking this is a weird question to ask, and it is! But it's fairly integral to my design for it to work this way.
Setting the container element's max-width to 1700px (900 + 400 * 2) will ensure that the content is never more than 400px away from the left side, provided that the container is not centered itself.
Related
I am reading A tale of two viewport and I could not follow the explanation at Consequences. He claims that when one zooms into his page, the upper right corner is not blue anymore even though it has width:100%.
I do not understand why this should be the case. In fact, I cannot even reproduce it:
Could someone explain me on a more simple example what the author's point is?
You can see the effect by using "browser zoom" (not pinch zoom), i.e. ctrl+/-. You need horizontal scrolling to see the effect in the author's example.
When you hit ctrl+ a few times, you're increasing the size of a CSS pixel. This means fewer CSS pixels will fit into your browser window (viewport) and thus zooming in shrinks your viewport. For example, say your viewport is initially 800px wide. You zoom in to 200%. Since each CSS pixel is now double the size, your viewport only fits 400px.
The article's point is that even though the viewport shrunk, the content on the page hasn't (in terms of CSS pixels), it's still ~800px (or whatever the author specified it to) since only the pixel size has changed. This means sizes that rely on the viewport will now look disproportional to the rest of the content. In his example, the top bar is set to fill the viewport width 100%. When the content becomes larger than the viewport, the bar will not extend the same width as the content.
So the subject is a bit lengthy. Anyway, what I'm basically doing is trying to get a unit be a specific height (366px to be exact), but I want that height to scale DOWN if the resolution drops, thus the "min-height: 366px" is naturally out because of that.
I did come up with a rather crummy solution where I inserted an image that's that height, but the image itself is 366 pixels tall and 100% transparent. That was the only way I could really get the container be the right height.
I need this height because the container will then contain more images within it that scale. These images are absolutely positioned within the container and are on top of my invisible image.
So is there any way to have a "min-width" that then scales as size goes down or am I out of luck?
Thanks a lot.
Em.... what about max-width 366px? that should work and.. did You use (it is probably not same as this)
I'm making a website with a sidebar and I am running into some issues with different sized screens. I have figured out that the best way to fix this is to have the sidebar and the content each begin as a percentage of the window (30% 70% respectively), but then only allow the content to re-size, keeping the original 30% of the original window size in the sidebar . How would I proceed with this?
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've set width to 100% for all main divs but there is still horizontal scroll-bar. Can't fix that problem. How to remove it? I don't know why it's appearing. Please take a look at my test page. http://aquastyle.az?lang=en
I cannot get your test page to open but this is typically caused when you have padding, a shadow, or a border applied to the 100% width element causing it to render wider than 100%.
Without seeing the page, I can only give the following generic advice: This can be fixed by removing the style properties that are causing the problem or reducing the width until the problem disappears.
EDIT:
After looking at your page, you don't seem to have a problem as you described. You just have too much (too big/wide) content side by side. When I make my browser's window about 1700 pixels wide, the horizontal scroll-bar disappears. This is an issue of poor layout more than programming.
EDIT 2 (The Root Cause/Solution):
It seems that the OP's PHP program is calculating the "display" width and placing content accordingly. The problem is that the "browser window" width is not the same as the "display" width. My display is 1680 pixels wide and the OP's PHP program reports that correctly. Naturally, my browser window is not 1680 pixels wide, more like 1000-1200 pixels, so I get a long horizontal scroll-bar which disappears when I make the browser window exceed 1680 pixels. Taking the width of the vertical scroll-bar into account, you actually have to make the browser window about 20 pixels wider than the display in order to get the horizontal scroll-bar to disappear (for me that was about 1700 pixels total). I imagine the OP can fix this issue by looking at browser's "viewport" (window) width rather than the computer's "display" width.
You'll want to use
overflow:hidden
on the element you're trying to eliminate the scroll bars from.
Or, you could use jQuery:
$("body").css("overflow", "hidden");
EDIT:
Your layout is 1920x1200. I have that resolution right now and I NEVER max out my browser window. It's always 20 to 25% smaller.
Most if not 98% of website layouts are 960px max width. I looked at your CSS (nice try with disabling right-click BTW) and you're left and right columns are both 200px EACH, while your main-content width is 1460px. I think you see where I'm going with this. I'm sorry, but the only way you're going to get no scrollbars is to redo your layout where everything fits in a 1000px layout or less. Preferably less. An important thing to check is the screen resolution stats that help in determining what percentage of users is running at a certain screen resolution. This will help you in targeting your preferred audience.
TL;DR
You gotta redo your entire layout, it's too wide for the majority of users out there..