I'm using http://www.cssstickyfooter.com/ for the footer of two sites I'm working on. Seems to be fine on a large monitor, no issues at all.
However when going to a smaller monitor and shrinking the page size down I'm getting a scroll bar at the bottom of the screen and the Footer is not stretching the full width of the screen.
A working example of this issue is here
Just shrink the screen size down and you can see the issue.
Any ideas on how I can fix this. It has also happened on this site I've made
Thanks in advance.
You need to set a min-width for your footer. Currently the footer is correctly adjusting itself to the size of your screen, even if the rest of the content no longer fits on the screen and scrollbars are added.
Find the width at which scrollbars appear and set your footer's min-width to that. Example:
.footer {
min-width: 1000px;
}
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.
I've adapted some CSS to use in a website and can't quite figure out why one aspect of the page is acting the way that it is acting. Basically, when I shrink my window below a certain size horizontally, all of the text "drops down". This becomes an issue if a user is viewing my website through an ipad with vertical orientation. You can view this issue here. I'm hoping to make it so that even if the window gets smaller, the placement of my text remains intact.
The problem is that the area does not have enough space to put both the side navigation and content on one line. Make it automatically adjust the page's width when it exceeds certain decrements of width. This code is an example, and it is highly unlikely for it to work. If I could see the CSS more clearly, then I could provide the exact code.
#media all and (max-width:960px) { /* Assuming the #wrapper is 960px across */
#content {width:560px;} /* As opposed to 720px */
}
Edit
The content drops down at exactly 980px, so you have to shrink the width after there.
#media all and (max-width:980px) {
#container {width:520px;}
}
div#content "drops down" because is set to be float:right which means when you resize the browser the content div to going to be moved with the flow of the page as it gets narrower.
try styling div#wrapper as white-space:nowrap and div#nav_left and div#content both white-space:normal
I am working on the following website: http://91.146.110.84/~pacspeop/
I am nearing completion but have noticed that if you make the browser window smaller than the defined width of the container (960px) a scroll bar appears (as it should). However when you scroll to the right the header and footer loose any content.
Anyone any idea how I can resolve this?
Cheers
Hey now do the body min width as like this
body{
min-width:960px;
}
I have a div that is centered on my website using margin: auto;
but for some reason if i start to shrink the width of my browser the div i showed in the image below begisn to move left with the browser, and wont stay in its position. I have tried using the position: thing but it doesnt seem to be working for my issue.
How can i get this div to stay centered and not move with the browser?
You can see the issue here on My Website
If you trysh rinking the browser width beyond a certain point that div just begins to move and isnt centered anymore.
Its a problem because people with small resolutions will not see the website right.
The div that seems to be having the issue is main-frontpage
change to min-width of your #footer to the same as the .jflow-content-slider & #main-frontpage (1050px) and then at least your content slider will not overlap the text at the bottom.
EDIT: looking again at your setup, just change the width of your #main-frontpage to the same as #footer #content-wrapper - 1240px. Really this is way too wide and it should be 960px wide but unless you change the width of your footer content this the only way to do 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