Footer Edits

[weatherstone]

Good afternoon,

I am migrating a client’s site from X to Pro: https://wordpress-209225-633021.cloudwaysapps.com.

Could you please tell me how to improve the styling of the footer containers? I was aiming for a 1/3 and 2/3 layout, but it appears on smaller devices that these containers are not stacking the way I was hoping, and the content is stretching off the screen (as can be seen here: https://prnt.sc/legsxg).

Please advise,
J

[thai]

Hi There,

I was not able to login to your WordPress dashboard, it always redirects me to the login page.

Please edit your footer inspect the Container > FLEX LAYOUT > check on the Wrap Children option:

Hope it helps

[weatherstone]

Hello,

Thanks for your reply. I have decided that I would now like a 1/3 + 1/3 + 1/3 footer layout. I have continued to edit the footer settings, but am still struggling to achieve the desired layout. I notice that when the columns stack, there isn’t a margin between them and that the second container expands to 2/3. Could you advise>

I verified that the credentials previously provided are working; please try again and let me know if you have issues.

[thai]

Hi There,

To add the margin, please add this element CSS to your container:

@media (max-width: 767px){
  $el {
    margin-bottom: 30px !important;
  }
}

Hope it helps

[weatherstone]

Hello,

I applied this code to both containers in my footer, but they are still exhibiting some odd behavior. The second container is still taking up 2/3 instead of 1/3.

Thank you!

[friech]

Hi There,

I only see 2 containers on your footer, please make that 3 containers and set those containers to Fill Space Equally and it will become a 1/3 + 1/3 + 1/3 layout.

And apply a 2em bottom margin on those containers (https://prnt.sc/lg3f6t)

Have that layout first, and do the adjustments if needed.

Thanks,

[weatherstone]

I changed the layout to a 1/3 + 1/3 + 1/3 layout, but on smaller mobile devices those containers are not stacking. What am I doing wrong?

Thanks,
J

[ruenel]

Hello J,

You are doing the correct way. Please be advised that the containers in the header or footer builder will not automatically collapse in smaller screens. What you need to do is to create another bar with one column layout exclusively for the smaller screens. You can then show/hide the bars in different screen size by utilizing the “Hide During Breakpoint” options in the Customize tab in your bar settings. To know more about the “Hide During Breakpoint” options, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.