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..
Related
I am currently facing an issue with browser resizing. When the page is at full size (i.e. the browser window is not being minimised), the page works well, yielding this:
However, when I minimise the window, making it smaller by compressing it vertically, this happens:
The content is cut off, and I cannot scroll to view the full content in the resized browser window.
I understand that this is a common issue. I have tried to resolve this by ensuring that:
any widths are in terms of % (and indeed, everything scales well
with respect to the width)
heights are auto (so that they wrap the necessary content)
When that did not work out, I replaced the height values with % values instead of simply using auto, making sure that the total height values did not exceed 100%. Unfortunately, that did not work out either. Any idea why, and what I can do to make this work? Thanks in advance!
My HTML and CSS can be found here: https://codepen.io/anon/pen/yoBEWb
try changing height: 100vh; with min-height: 100vh;
You can use Media queries to resize properly your screen and adapt your content. Basically a media query is something like a rule saying for example : if my screen height is less or equal to 480px then please reduce the font-size, place it below...More info here.
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.
I'm using the xeon Bootstrap template (http://shapebootstrap.net/preview/?id=64). Firefox on a Mac renders the margins close to the edge of the window. Safari, using a window that is exactly the same size, renders the margins much wider.
Two questions: Why is this? How can I configure Bootstrap to be more consistent across browsers?
Thanks.
I'm not on a Mac so I cannot verify what I'm about to suggest. A screenshot might be helpful or a link to the page. There is not a lot to go on here, hence the lack of answers, but I'll give it a shot.
I'm assuming the issue is with the browsers and not Bootstrap or some sort of perception of difference that is not fully understood.
What exactly do you mean by "is exactly the same size"? Are both browsers maximized? Did you manually re-size them so the top, right, bottom and left edges line up? If so, that doesn't mean the viewports are the same size. Each browser has it's own chrome, UI elements (scrollbar) and etc., that can be different sizes and which will affect the viewport size.
The .container element's margin is set to auto which the browser automatically calculates for set width elements like .container. Bootstrap's .container class has specified widths for various viewport sizes. You might be viewing your page at a viewport width that is very close to a breakpoint and the right scrollbar (or something similar) is slightly smaller/larger in one browser than in the other. This in turn could trigger the page to render at a different widths giving the appearance of different margins.
For example:
Bootstrap has a breakpoint at 992px.
If your viewport width is 995px in Firefox, Bootstrap would render .container at 970px.
If your viewport width is 990px in Safari, Bootstrap would render .container at 750px.
Based on this suggestion of it being a breakpoint issue I would find out what each browser's viewport width is exactly. Then make sure you set them to the same width. If you get the same result/issue, then you will know it is not a breakpoint.
Additional information would be helpful.
Hopefully this points you in the right direction.
This is more of a general question; but I notice on some webistes (including stackoverflow) That when content is off the screen and the user has to scroll to the right background images/color stop at 100% of the screen view. Does anyone have a better idea how to fix this.... other than setting max and min widths?
here is a google doc of two different websites to explain what I am talking about.
https://docs.google.com/document/d/133Uek4Fd3G3eB6Zz4CNomPGzARevCUg4fAV4Xhvin-o/edit?usp=sharing
Josh C's response is spot on. If the elements that have background colours had min-widths that matched the content width (980px in stackoverflow's case) then the issue would be resolved. This is not only the easiest way, but probably the best practice)
Your alternative, if you don't want to set max and min values to your elements that use percentages, would be to not set fixed widths on elements (in the case of stack overflow, it's content width is fixed at 980px, and most everything else is fluid).
If content and it's children used max-width instead of width this problem would disappear.
Alternately, as lookingGlass points out, more fluid responsiveness.
Add breakpoints so that when your window size is below/above your ideal the site adapts.
I need some help:
http://www.stansellelectric.com
If you go to any page on this website and re-size your monitor (or Firefox browser if you use the Web Developer toolbar) down to 1024x768, a horizontal scrollbar will appear both in the #contentwrap div and the page itself. Now, increasing the width of the window to 1039px fixes this, however I need it to stay at 1024px and not have a scrollbar anywhere.
I'm stuck, help please?
1024 pixels is the total width of the screen.
In order to fit content on a 1024 pixel screen, you need to account for the vertical scroll bar (usually 16-24px in width) and (in some browsers) the window's edge. These will take away horizontal space.
Bottom line: You need to use a smaller width for your content than 1024 pixels. A number that is popular among designers is 960 pixels, also because that can be evenly divided; it's used e.g. by the 960 grid system, a popular CSS framework.
However, in my experience, a slightly higher number (like 980 or even 1000) will also work well for the majority of devices.