Full width Footer

I’m working on a Footer that has this:
Footer–>Container–>Global Block

I would like the entire footer to stretch full width so that the right-column (light-blue background) meets the right side of the screen. See screenshot.

I’ve tried all different types of configurations, nothing is working. I followed this but nothing changed:

What is the issue here? How can I accomplish this?

Thank you.

Hello Chad,

Thanks for writing in! Are you using a custom footer? Please edit your footer and then set the Content Length to 100% and the Content Max Length to none.

You must also edit your Global Block and make sure that the global container in the row settings is turned OFF.

Hope this helps.

Hi RueNel thank you for responding. I do not see the same options in the Global Block as I see in the image you posted. I checked all layers in the layout, such as the main section, the row and the columns. None of them have controls for font size, align horizontal & vertical, gap width and height, global container, width & max width. Where can I find these settings?

Thanks.

I tried rebuilding the Footer and Global Block, not with Classic elements, and now I see the options you are referring to. It still is not working. I’ve looked through all settings for the Section, Row, Columns, Containers… everything and it all looks like it should stretch. As a Global Block, it stretches from side to side. When I drop it in the Footer, it shrinks to the left and leaves a big gab on the right. Something must be wrong with the footer settings but I do not see anything that controls this. Could you run through all the pieces and all the settings to make a Footer with a Global Block stretch from side to side? Thanks.

Hello Chad,

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:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

Hi RueNel,
I added the Secure Note. Thank you for your help.

Hi Chad,

Thank you for the credentials, the problem with that is that the Global Block element main container is not set to be display flexbox.

But we can resolve your issue (on desktop) by adding the custom CSS below on your Global Block element’s Element CSS area. (see “Copy of Clouds BG” for your reference)

$el {
  width:100%;
}

I understand that you did this Global Block Footer setup to avoid the complexity of footer builder, however, this can actually backfire as it can complicate your footer styling (see your footer on mobile). If you want a Global Block as your Footer I advise that you place them on the page as the last section instead, then use a No Footer page template. Else build the footer layout on footer builder and not as Global Block.

Happy New Year,
Cheers!

Thank you for your help. I had to use a Global Block because the “Footer Builder” elements do not include a Classic Feature List. Placing a Classic Feature List inside a Global Block was recommended by another tech support person here.

Do you know of another way to get a Classic Feature List inside the Footer Builder without using a Global Block? It’s a shame that I can’t use the same components already built into the website and use them in the footer. Seems like a disconnect.

Is there another element similar to a Classic Feature List I can use in the Footer Builder?

Here is the link to the other thread. https://theme.co/apex/forum/t/how-to-use-a-classic-feature-list-in-the-footer/67821

Hi Chad,

Thanks for the clarification, yes you can not use the Classic elements in the Header/Footer builder, but most of those classic elements can be recreated on (new V2) Elements counterpart.

With the Headline element 's Graphic icon and Subheadline option, you can recreate the Classic Feature List items (minus the connector lines and animations).

Cheers!

Hello. Happy New Year! Thank you again for the reply. I decided to create the footer from scratch in the footer builder without using any of the classic elements that were used previously in the design, no presets, no global blocks. But I am still in a similar place as I was before. I would like to have the blue background stick to the top and bottom in all screen sizes. Is there a setting for this that I am missing? How can I make these sides stick?

Screenshot of what I’ve done so far: https://drive.google.com/file/d/1WJ-6N4aX3KkJ0Ezp43iLojXz7nIQ6t4v/view?usp=sharing
Screenshot of the design I’m following: https://drive.google.com/file/d/1A_RLC7BXObkMnTaYsbDF0aZ7rOaUEZcX/view?usp=sharing

If you log in, I’m working on the New Footer 2.

Thank you!

Hi Chad,

Please inspect your Bar and set the Vertical Align to Stretch


Then apply a 6% padding on all sides on your right column.

Hope it helps,
Cheers!

Thank you! You guys have been a great help.

We are delighted to assist you with this.

Cheers!

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