Telephone Number & Email Address Top Bar Alignment on Mobile

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;
    }
}

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

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;
    }
}

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

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

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

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

Let me know :)

Hi Leo

I've now separated the two widgets.

Thanks

Duncan

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

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

Hi Leo

Thanks for getting back to me.

I've activated the parent theme as requested.

Duncan

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?

Hi Leo

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

What else should I now do?

Duncan

Is the parent theme still activated?

I'm seeing some issues on your site.

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