Search code examples
htmlcssfooter

footer not displaying properly when browser window width is decreased

probably easier just to link to an image showing what is happening.

https://i.sstatic.net/Hhjit.jpg

the first image shows the way the footer looks normally, and then the second image shows the problem i am having when i reduce the window width.

when i make my window width smaller the footer and header both dissappear relative to how much smaller i make the window. the dissapering starts when the horizontal scroll bar appears.

here is my css for the footer element.

.bottombar {
 height:220px;
 clear: both;   
 width:100%;
 background:-webkit-radial-gradient(black 15%,transparent 16%) 0 0,-webkit-radial-gradient(black    15%,transparent 16%) 8px 8px,-webkit-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,-webkit-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
 background:-moz-radial-gradient(black 15%,transparent 16%) 0 0,-moz-radial-gradient(black 15%,transparent 16%) 8px 8px,-moz-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,-moz-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
 background:radial-gradient(black 15%,transparent 16%) 0 0,radial-gradient(black 15%,transparent 16%) 8px 8px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
 background-color:#282828;
 background-size:16px 16px;
}
Solution

  • Define min-width your footer.

    For example:

    .bottombar{
 min-width:1000px;
}