I have a similar problem as Stackoverflow.com web site has. The problem is width a banner above the content or body of the web site. I want to be able to reduce the width of the browser page but keep the size of the banner no matter what resolution is running the browser.
Example, if you reduce the width of this page you will see that a scroll bar will appear so you can move the page to the right and see the content hide. However, if you look at the banner the banner will have the new width that was reduced the page.
If i understand correctly may be you can define min-width in to the body. Write like this:
body{
min-width:975px;
}
It's mostly happened when the element have auto width & his parent didn't have any width define.
Related
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
Ok I have a problem where one div's margin doesn't appear to stay relative to the previous div as the browser window re-sizes (height not width). This creates the problem where content overlaps as shown when in a wide browser. The picture bellow shows how in a narrow screen it works fine, however in the second picture you can see how the div has moved up based on the browser being made wider (27 inch imac).
If you go to: http://creativeabyss.co.uk/test/ you can see this effect for your self as you resize the window (You might need a big monitor). I cannot for the life of me figure out what is causing this, so I was wondering if any of you could help? The code should be available at the aforementioned link.
p.s I have set the background of one div to blue which illustrates that it is the size of this div which appears to be causing the issue...
Your problem is the fixed height on #OuterMenu. It is set to 300px, when you resize the browser window, the height of the content inside #OuterMenu decreases, but #OuterMenu is still 300px high, this causes some empty white-space to be displayed before the content which is rendered below it. Getting rid of the fixed height on #OuterMenu will fix this. It breaks on high resolutions because then the content inside #OuterMenu will be too high for its containing div which is only 300px high. In this case it will look like the content below this div is rendering over the top of the content inside #OuterMenu, but in fact it is the 300px height set on #OuterMenu which is limiting the space allowed for #OuterMenu to render its content within.
Got sample set up here: http://codepen.io/rctneil/pen/myxDc and full page sample at: http://codepen.io/rctneil/full/myxDc
On that sample, I have a header with a .container within it, header is full width and .container is fixed to a particular width.
If you set the width to be 980 pixels or less then the page renders nicely on an iPad, if you set that width to be greater than 980 pixels then you start getting erroneous space on the right hand side.
I thought the default layout mode on iPad was that if an element is wider than the visual viewport, the visual viewport would zoom out until everything fitted and then allow the user to manually zoom into parts of the page. This is how it has worked in the past for me, I am sure.
Anyone know why the site is not auto zooming out to fit correctly?
If you set the height of the page large enough to require vertical scrolling, it will automatically shrink down the width. For example, set the width and height to 2000px on .container, and it shrinks the page appropriately. This probably isn't a viable solution in this circumstance, but it is a interesting observation of iPad viewport behavior.
I would recommend using iOS meta viewport tags. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
I have been running into problems with the height of the header in a site for a uni project.
What I want to achieve is a header which contains a nav, background image slider (which is 100% wide) and speech bubble, with the site content below the header.
At the moment I have it all working as it should be, but the height of the header is not taking into consideration the background image slider, the reason for this being that it (the background-slider) has had to be positioned absolutely. With the current state of the site, I have added a header height in em, this gives me the required spacing on my laptop, but when moving to larger resolution the height is insufficient and the site content runs into the image.
My question is, is there a way of maintaining the current layout but including the functionality of the adjustable header height?
Current site is at: http://beta.immbudden.com
If you are viewing on screen size larger than 1366 x 768, you will see what I mean.
Any help at all would be really appreciated, many thanks in advance!
I actually managed to fix it myself. I positioned the nav absolute, speech bubble absolute and background-slider relative. I then gave each appropriate z-index's. I also had to change the order that each was called in the html, placing the slider from being called first, to last.
Hope this manages to help someone else, and if you need it explained any better just comment here :)
Add a bottom-margin to the header equal to the height of the absolutely positioned nav.
Why not just set the height of the header in pixels? If you have a set height nav and the image slider, you should be able to just set it.
I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.
How it displays in wide browser windows:
How it displays in narrow browser windows:
Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?
The page is live here if the CSS will be helpful.
Yes, you should give the <body> a min-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.
-edit-
ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.
The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.
This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go