The website screen resolution for a 1366 x 768 shows 1351px width in Chrome. The same for 1920 x 1080 shows 1905px width. I have checked padding, margin and border and everything are 0. Anyone knows where this 15px goes?
I am not just talking about my website. It is there in every website we take. Just try Inspect here itself in StackOverflow and click on body tag to know its size.
That might be width of the scroll bar.
Add position into your style sheet, something like this:
position:fixed
Makes position fixed relative to viewport
if that doesn't work, try:
position:absolute
Makes position fixed relative to document
Related
I was wondering how to keep the size of an element (f.ex a cube) on all devices. And when you resize the browser window the element will keep the same "form", but become smaller. What i mean is so when you resize the browser window horizontally, the element (f.ex cube) will keep the same "form". So it wont be more wide than tall.
I know i got to use percentage and not px on the with and height. But when i do that, the element will of course still be the percentage of the current device or screen. I am very bad at describing, so i'm going to give an example instead: When i made a calculator with HTML and CSS on school it fitted the screen perfectly. But the screen on the school is squared (same width as height). And the screen at home is rectangled (not the same width as height). So the calculator at home is to wide. You understand now? If you didn't please let me know.
Here's a picture of how it looks like on my screen home: Full sized browser window home Resized smaller in width window: Smaller in width browser window at home
And sorry for bad describing.. And english.
I dont know if I get what you mean, but if you do mean "keep aspect ratio" you should try this.
Wrap your element in another container, use padding bottom on the container and make your element occupy all its space.
I'm working on this page and I'm having a issue with the DIV where sliders are. This div#home-slider has a height: 350px as you may notice and it works fine for large resolutions but since the page is responsive, when I resize the window or see the page from a tablet or smartphone a white row appears just below the sliders and it's caused by the height value since it doesn't change. Can any give me a solution for change the height or tell me if there is a CSS solution or hack for this? What would yours do in this case?
Have you tried to change the height to 100%?
I would remove the height declaration.
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..
I'm experiencing an issue when setting a minimum width for an area. The problem is when the browser goes smaller than the min width, the background color/image set by CSS doesn't expand further than the window size. In other words if they were to scroll to the right to view all the content, the background seemingly disappears.
If the browser was 1000px wide, and my min-width is 1200px, then the 200px outside the min width area won't have the background.
Ideas?
DEMO: http://www.nickersonweb.com/demo/PMS/index.html
You're on the right track. I had this problem once as well when I was making a site that had repeating horizontal edges. The solution is to also give your parent divs <div class="banner">,<div class="body">,<div class="footer"> the css style of min-width: 1000px;. Now it will show just fine when you scroll.
Here is the site in question: www.prestigedesigns.com
The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.
I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?
Thanks.
It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.
This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.
Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.
You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.
Set the viewport to adapt your page on any device.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Set min-width:(Width of your design)px; in CSS file and this issue will be solved.
it's not assigned width: 100% the header is getting width: 1009px; same thing with the footer.
Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?