Creating a Full-Width Footer Widget

Support
#1

I have inserted smart slider into the footer widget. It shows up, however it is not full width. How do I change a foot widget area to full width?

#2

Hello Bryan

Thanks for writing in! To make the footer widget area into a fullwidth section, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-colophon.top .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

We would love to know if this has worked for you. Thank you.

#3

I did what you said, but now I have pages where the footer fills the space on some pages and has a gap with the background showing on other pages. You can see the example here. What’s the best way to ensure the footer is filled and not showing a purple bar with the background?

https://umanityx.com/ - Fills full space here

https://umanityx.com/workshops-upcoming/ - Still a gap above the slider

#4

Hello Bryan,

It is because of this code that is in your global css:

footer.x-colophon.top {
    padding-top: 30px;
    padding-bottom: 0px;
}

Try setting the padding to 0.

Hope this helps.

#5

I need this for the homepage. But it is messing up the remaining pages after that. What do you do in this situation?

#6

Hi Bryan,

You can change the code to:

.home footer.x-colophon.top {
    padding-top: 30px;
    padding-bottom: 0px;
}

The code above forces the code to only work on homepage.

Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.