Center Footer and Header in Mobile on Pro

I’m trying to figure out how to center my footer and header in PRO. Neither look correct on mobile. They don’t stack on top of each other. I’ve added some screenshots below from PRO and then how the header previously stacked in X. The footer is new but I’d like each of the 3 items to stack on top of each other. I’d like them to stack from left to right.

This is the old header on mobile which I am trying to recreate in terms of centering and spacing.

Hi Matt,

Do you have the elements in two separate containers in a bar? If so, try enabling the wrap option of the bar:

If your setup is different, please provide us with the admin access to your site in a Secure Note because your website requires login to open:

I can’t get this to work so i will add a secure note with login info.

I would like it to look similar to the example I shared from the current site if that wasn’t clear. The only difference being that I’m using the updated Social Media Icons. https://kloosterfamilydentistry.com/

Hi Matt,

First, we need to make sure that the Bar wraps it child (Container) when the screen width gets narrowed (mobile), also make the Bar height responsive to make sure it has enough height when the containers get wraps. Those are the height the Wrap options on the Bar.


Also, I added this Element CSS to your Bar so the containers inside it when stacked will be in the center, not stay on the left-side.

@media (max-width: 767px) {
	$el.x-bar-content {
	    justify-content: center; 
	}
}

Another thing, as you can see the line element you added as the divider is gone when the page is viewed on mobile, I did hide that using the Hide During Breakpoint feature.

See your "Home’ header for your reference, the “Copy of Home” header is the original copy of your header, you can practice on that.

Same case in the footer. Please this video to learn more about the flexbox.

You can also learn more tips and tricks to our Youtube Channel.

Cheers!

Thank you so much!!

You are most welcome!

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