Formatting problem with Flexbox in footer

Support
#1

Hello,

I’ve designed a footer which is composed of 3 bars.

(My apologies but I’m not sure how to post the link without making it public… or whether you can check the link by cross-referring my account with my license. I have two licenses… this pertains to the site beginning with an “h”).

Anyway, the bar labelled “Bar 3” is posing a problem. In desktop/tablet, the flexbox is set to direction: row. It behaves normally. In mobile, I’ve created a new container that is set to direction: column. This change, however, is triggering some unexpected behaviours.

1 - The 2 flex items will not center horizontally. It looks like the navigation-inline element has a left margin, although the margin is set to zero.

2 - The second flex item is inheriting the font size of the first flex item. I don’t understand why this would happen in only the direction-column format as both containers are working the same.

Any help you can provide is greatly appreciated.

#2

Hi There,

Thanks for writing in!
Please check my answer.

  1. I checked the site having the test in the URL and the footer works perfectly.
    everything centered align in the mobile.(Please check the screenshot in the secure note.) In desktop the. social icons are left aligned so it has some space in right, that’s why it’s not aligned properly.

You can do the container flex position to end and it will align.

  1. Here is some confusion the question, Can you please help us with the screenshot or a screen cast video of your issue so that we can suggest you better.

Thanks

#3

In your screenshot, I see both problems visible.

Please look at the “Terms of Use | Privacy Policy” links at the very bottom. You will note it’s not centered properly. Rather, it’s a bit over to the left as if there’s a right margin or right padding. But in looking at the settings, i cannot see any such margin or padding.

Also, if you look closely you’ll see the “Terms of Use | Privacy Policy” links are slightly smaller. I believe this is because they are set at 0.9em and are basically being formatted as 90% of the size of the line above (e.g. “Copyright 2018”). What is confusing me is this problem only occurs when the flexbox is set up as column. If you look at the design in desktop mode, this inheritance issue is not occurring and the “Terms of Use” line is exactly the same size as the “Copyright 2018” line.

#4

Hello There,

Could you please post your WP access again in a secure note so that we can investigate?
I have gone over your other threads and I could not find any login details. Maybe it is already remove or no longer available. If I could log in, I could inspect your settings and figure out why the issue occurs.

Thanks.

#5

Please see secure note

#6

Hello There,

I have logged in and I found out that it is not centered because of your margins. Please edit it and change the left and right margins to “auto”.

If you need anything else we can help you with, please don’t hesitate to post another thread.

#7

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