[Resolved] Telephone Number & Email Address Top Bar Alignment on Mobile

[Leo]

What version of the theme are you using?
https://docs.generatepress.com/article/generatepress-and-gp-premium/

[Duncan]

Hi Leo

GeneratePressVersion: 1.3.46

[Leo]

That is very old.

Can you please update?

[Duncan]

Hi Leo

That’s me updated to GeneratePressVersion: 3.0.2

[Leo]

Now add this CSS back in:
https://generatepress.com/forums/topic/telephone-number-email-address-top-bar-alignment-on-mobile-2/#post-1557021

Then this as well:

@media (max-width: 1000px) {
    .inside-top-bar {
        justify-content: center;
    }
}

[Duncan]

Hi Leo

As you suggested I’ve added both bits of CSS back in to the “Additional CSS” section within the the ‘Appearance’ – ‘Customise’ section.

What else do I do now?

Thanks in advance

[Leo]

That should be it.

Are you still seeing some issues?

[Duncan]

Hi again Leo

Firstly I’d like to thank you for the support you’ve given me over the past few days, it’s much appreciated.

I’ve now got the site looking as I want, however I have one final issue I hope you can help me with.

When viewing the site on iPad horizontal, the telephone number and email address in the top bar is still sitting to the right, and I would like it to sit aligned to the centre.

I’ve added an additional piece of CSS which helped to get the telephone number and email address aligned to the centre on mobile vertical and horizontal modes, but only vertical on iPad.

Thanks in advance.

[Leo]

You will need to increase the 1000px breakpoint in this block of CSS:
https://generatepress.com/forums/topic/telephone-number-email-address-top-bar-alignment-on-mobile-2/page/2/#post-1559474

[Duncan]

Hi Leo

Thanks for the prompt reply.

I’ve increased the breakpoint to 1200px and it has helped, however it’s still sitting to the left slightly.

Any suggestions so we can wrap this up?

[Leo]

Try matching the left and right top bar padding:
https://docs.generatepress.com/article/top-bar-widget-area/#spacing

[Duncan]

Hi Leo

I’ve matched the left and right top bar padding and it’s now displaying as it should on iPad.

However, it’s now knocked the telephone number and email address in the top bar over to the right on desktop.

I’ve tried to change the padding for each individual mode i.e. desktop, tablet and mobile, however it won’t let me set individual values for each mode for some reason.

[Leo]

What if you remove the left and right header padding?
https://docs.generatepress.com/article/header-padding/

[Duncan]

Hi Leo

I’ve tried removing the left and right header padding and it doesn’t make any difference.

[Leo]

Are you sure you’ve removed the header padding?
https://docs.generatepress.com/article/header-padding/

I’m currently still seeing 26px on the right and 38px on the left.

[Author]

Posts