Stacking footer for mobile use

Hi there community,

I am in the midst of adjusting padding and styling for my footer but currently it is not responsive. I would want the footer menu to stack with the logo being the first thing to stack and for everything to be aligned left…how do i go about doing this. see example of current footer and rough example of what i would like it to look like.

Hello Carolina,

Thanks for writing in!

The bar footer is using flex layout. The logo is added in the last container. I would highly recommend that you create two separate bar footers. The first bar footer will be for the desktop and large screens and the second bar footer will be for your smaller screens. In this way, you can achieve what you hand in mind like in the screenshot. You can show or hide the bar footer for specific scree size by utilizing the “Hide During Breakpoints” option which can be found in the bar setting’s “Customize” tab. For more details, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.

Oh yes!! so i created a menu that works perfectly for mobile based on what you sent me however, as you move down in screen size the containers and elements swap and move around, instead the padding on each side should get smaller until it reaches the mobile footer design…i took screen shots of me moving in screen size and the elements moving around

Hi,

Try to add two more bars that contains two column each. 1 bar for social and contact then another bar dor your form and image. You can then set these bars to display in between your desktop bar and mobile bar.

Hope that makes sense.

Thanks

So i fixed the problem and now its more responsive looking but the alignment is very wacky. nothing seems to be aligned, I want everything aligned to where my logo on my site is, and this includes mobile version which is actually perfectly aligned besides the @2019 he foundation copy…Below is a screenshot of my desktop view

Hello Carolina,

The bar footer has a different width from the header because you have added a padding of 4em 7vw 4em 7vw. Please edit the footer again and make sure that there is no left and padding. You will also need to set the maximum width of the bar footer the same as the maximum width of your header.

Please let us know how it goes.

That worked !!! but now the height for the footer is wrong, how do i add some padding to the height?

Oh i just fixed it, i just added padding…thank you!! this theme rocks!!

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.