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

[Duncan]

Hi

I’m looking for some help and assistance.

I’m happy with the layout of the top bar on my website on desktop and tablet.

However, when viewing the site on mobile vertical mode the telephone number and email address are aligned to the left and not the centre, and when viewing the site on mobile horizontal mode the telephone number and email address are aligned to the right and not the centre.

Can you therefore advise me how to fix this please?

Thanks in advance

[Leo]

Hi there,

The custom CSS in your child theme is causing some issues here.

Can you remove the float: left from this block:

.top-bar p {
    float: left;
    margin-left: 18px;
    margin-bottom: 10px;
}

and add this?

@media (max-width: 768px) {
    .inside-top-bar .widget {
        text-align: center;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo

Thanks for your reply.

I’ve done as you suggested, however the telephone number and email address are still sitting to the right in mobile horizontal mode, and they’re now on two lines of text rather than the one.

I may have missed something, can you please advise?

Thanks

Duncan

[Leo]

The horizontal mode on mobile is a bit tricky to deal with.

You can try increasing the px number like this:

@media (max-width: 900px) {
    .inside-top-bar .widget {
        text-align: center;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo

I’ve done as you suggested but it’s still sitting to the right in horizontal mode, even tried increasing the pixels to 1100.

Also, as I mentioned previously the email address and telephone number are now sitting on two lines on all modes, rather than the one line – side by side -, as they were previously.

I hope this makes sense.

Your assistance is greatly appreciated.

Duncan

[Leo]

Can you first remove all the custom CSS for the top bar you’ve added to your child theme first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo

I’ve now removed all the custom CSS from the child theme.

I really appreciate your help, I’m not too technical so if you please bare with me.

Thanks again

Duncan

[Leo]

Can you first separate the phone and e-mail as two widgets first?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo

I’ve now separated the two widgets.

Thanks

Duncan

[Leo]

I’m still seeing some CSS for the top bar.

Any chance you can activate the parent theme first while we sort this out?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo

Thanks for getting back to me.

I’ve activated the parent theme as requested.

Duncan

[Leo]

Thanks.

So the first thing we need to do is to put two widgets both on the right, and we can do that with this CSS:

@media (min-width: 769px) {
    body .inside-top-bar.grid-container {
        display: flex;
        flex-direction: row-reverse;
        max-width: 1138px;
    }
}

Can you test and make sure that works correctly first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo

Thanks, I’ve done that and it seems to be displaying properly.

What else should I now do?

Duncan

[Leo]

Is the parent theme still activated?

I’m seeing some issues on your site.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Duncan]

Hi Leo

Yes the parent theme is still active. I added the CSS you suggested to the “Additional CSS” section within the ‘Customise’ menu, I don’t know if this is correct or not?

My apologies as I’m kind of lost now, would it help if I gave you my WordPress log in credentials?

Thanks

[Author]

Posts