Full Width Bar in Footer

Support
#1

Hi,

I am trying to put a 5 coloured line across the top of my footer to match our logo colours and i need to make it ful width. It currently has white space to the left and right. I only need bar 1 (it has 5 containers all spaced to fill) to be full width, the rest of the footer is fine. Can i do this in the footer as i do not want to have to put it manually as a section on ever webpage. I have attached a screenshot.

thanks

Chris

Screenshot 2020-10-17 at 22.30.51
Screenshot 2020-10-17 at 22.30.511914×891 144 KB

#2

Hello Chris,

Thanks for reaching out to us. You need to edit your footer and insert a bar dedicated with 5 containers so that you can insert your colored lines. To make sure that the lines will be touching the left and right edge of the browser, you will have to set the content maximum length to at least none or set it to calc(100vw - 0px) since you cannot insert 100% in that option field.
Screen Shot 2020-10-18 at 7.20.20 AM

Hope this helps.

#3

Hi Ruenel, I have just give that a try but no luck i’m afraid. I made sure that i added those settings to the bar but it still seems to be in a container as in it has the white areas to the left and right of the 5 columns. Is it something to do with the sit width? I don’t really want to force the whole site to 100% width as it would modify all of my pages. Any other ideas?

Thanks :slight_smile:

#4

Hey Chris,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:

image
image1040×250 17.4 KB

Thanks!

#5

Thanks. Added secure note to this post.

#6

Hello Chris,

The footer bar will not display as fullwidth because you have added this custom CSS:

footer.x-colophon .x-bar-content {
    max-width: 1500px !important; 
}

You will have to remove that custom CSS. Please check out my example footer demonstration.

Best Regards.

#7

Thanks @ruenel, i got advised to add that code previously to center some content but i have found another way of doing it now so i have removed that code and it has solved my issue :slight_smile:

Many thanks for sorting this out for me.

Kind regards,

Chris

#8

Hi Chris,

Great that it sorted now.

Thanks