Pro Footer alignment/ responsive issue

[el3ctrofuzz]

Hey Team,

I believe I’ve setup my footer correctly, but for some reason when the device width pushes the row into a single column, the 3 columns are not stacking centrally.

I’ve got no padding set on any of the divs, containers, rows, etc. All the flex’s are set to align central. The bar is set to be auto height too! I’m confused!

I cannot fathom why, when squeezing to a single column, it pushes over to the right so far.

Would someone mind logging-in and having a look? I’ll leave details in the secure note below.

Thankyou and kinds regards, <3

[prakash_s]

Hello @el3ctrofuzz,

Thanks for writing to us.

I checked your site footer it seems that you have set the column’s Align Horizontal as “Center”. I would suggest you set it as “Start” Please have a look at the screenshot given below. To set is go to -->Footer–>Container–>Row–>Column.

Hope it helps
Thanks

[el3ctrofuzz]

Hey Prakash,

Thanks for the advice, but I don’t think that’s right.

I do want the items within the column to align to the centre. The column seems to think that it’s width is far beyond the edge of my device’s screen, and therefore it tries to centre the content partly off screen.

I want the row to have 3 columns, then no matter what the screen size, those three column’s content should always be centred, even if the columns have to stack when the screensize is small enough.

This is how it works in the content builder, why doesn’t it work this way in the footer builder?

Thank you

[friech]

Hi @el3ctrofuzz,

Is this layout from one of our templates? This seems to be complicated than it looks to be, looks like the inner row and its columns and the divs inside it messing up the flexbox configuration.

The solution is setting the Content Length of the Bar to 100% (it was set to auto before). This looks like an easy-to-find solution, but really spend some time figuring this out.

Hope it helps,
Cheers

[el3ctrofuzz]

Hi Friech,

Thanks for your help - this solved the issue.

No, I built it from scratch. I found it weird that the rows could not be immediately inside of bars, instead, they have to be in a container first.

Yeah, I agree the div structure that contains the ifo and opening hours information is quite complicated. Again, I was using flexbox to try and align things as required, but they just would not behave correctly.

As you say, I’m guessing that somewhere in there it is fooling the width of the bar to be wider that the vw of the device.

Thanks again

[tristup]

Hi @el3ctrofuzz,

Great that it resolved now.

Thanks