Announcement

Collapse
No announcement yet.

Full (Screen) Width Footer

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [vB5] Full (Screen) Width Footer

    Hi Everyone,

    vBulletin Version: 5.6.1

    Full Width Footer
    I needed to make the footer span the entire screen width while leaving the #wrapper & #outer-wrapper margins in place.

    CSS Code
    The CSS is fairly simple but you could have to adjust the margin values depending on your own site's #wrapper & #outer-wrapper margin settings (left & right). I found fixed margin values gave a better result, without a horizontal scroll bar, rather than trying to use margins set with percentage values. Percentage values never quite gave a perfect fit.

    Mobile Screens
    For mobile screen widths 767px or below you need to set the margins back to zero using a CSS media query.

    Code Location
    Add the code here:
    AdminCP > Styles > Style Manger > (Your Chosen Style) > Edit Templates > CSS Templates > css_additional.css

    Code:
    #footer {
        margin-left: -20px; /* Make footer full width of screen */
        max-width: none; /* Remove width constraint */
    }
    #footer-tabbar {
        margin-right: -40px; /* Make footer full width of screen */
    }
    media (max-width: 767px) {
        #footer {
            margin-left: 0; /* Make footer full width of screen */
        }
        #footer-tabbar {
            margin-right: 0; /* Make footer full width of screen */
        }
    }
    Wide Screens

    Click image for larger version

Name:	footer-wide-screen.png
Views:	21
Size:	33.1 KB
ID:	4441062

    Mobile Screens

    Click image for larger version

Name:	footer-mobile-screen.png
Views:	12
Size:	30.4 KB
ID:	4441063

    Hope this CSS helps someone.

    Aly

Related Topics

Collapse

Working...
X