Using Global Block as Global Footer in X Pro and it's not displaying correctly!

[core365]

Hi, I’m using X Pro and I find it overly complicated when trying to create a header/footer with the Pro Builder, as I find the flex box settings and how it then works responsively very confusing and not straight forward - so I’ve created my footer as a Global Block, as I find it far easier to adjust the width of the columns according to the Layout and screen size of the device for it to be viewed correctly. I’ve then used the Global Block element in the Footer Pro Builder, but it’s not displaying the full width and for some reason the font size is bigger!

I’ll put the URL in a secure note as it’s on a temp link. So you are able to compare how it should look, if you scroll down to the bottom of the page, the correct footer appears first and then the Global Block element in the Footer Pro Builder is under it - you’ll see it takes up only part of the screen and is aligned left! I don’t know why it’s doing this!

I hope you can help!

Thanks!

[friech]

Hi @core365,

Thank you for writing in, on your Global Block element apply a width: 100%, you can do this by adding the custom CSS below to the Global Block’s Element CSS area.

$el {
	width: 100%;
}

Cheers!

[core365]

Hi @friech,

Thanks, I’ve done that, however it’s still not displaying at the full width.

I’ve added the custom CSS you suggested to the sections within the Global Block itself and also to the Global Block Element in the Pro Footer Builder. I’m not too sure if I was suppose to add it somewhere else but I can’t think where!

Thanks!

[marc_a]

Hi @core365,

Please give us the following information in a Secure Note to help you further with your concern.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[core365]

Hi @cramaton,

Ok, no problem! I’ll put the info in the secure note.

Thanks!

[marc_a]

Hi @core365,

In your Pro Footer Option, click the search icon in the container layout

Then to go Customize

Then add a class name then edit CSS.

On my example, I added a class name “testname” then in your Edit CSS add this code:

.testname {
width: 100%;
}

The “testname” is the one you added in your class name here:

I hope it will help to solve your issue.

Thank you.

[core365]

Hi @cramaton,

That’s great, thanks!

Do you know why the text is bigger on the Pro Footer compared to the one above it which is what I used to create the Global Block, as I don’t want the text size to change, it needs to be the smaller size!

Thanks!

[friech]

Hi @core365,

Your footer bar font-size is set to 16px

While your text font-size is set to 1em, 1em supposed to be 14px (base on your root font-size), but because you have font-size set to 16px on your footer bar, that is why the calculated value of 1em on the footer is 16px (larger than the 14px on the content), please see the following link for more details about em and rem unit.

https://j.eremy.net/confused-about-rem-and-em/

Hope it helps,
Cheers!

[core365]

Hi @friech,

I didn’t realise those settings would effect the Global Block element, as I just assumed it would take the settings for the font size etc I’d already assigned for the Global Block. It’s a shame there isn’t an option then to turn off those settings for the bar in the Pro Footer so it just takes on the settings from the Global Block, but I’m sure there’s a reason for it!

Thanks for your help and advice, you’ve sorted it!

[marc_a]

@core365,

It is our pleasure to help you.

Thank you.