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

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

Home Forums Support Telephone Number & Email Address Top Bar Alignment on Mobile

Viewing 15 posts - 1 through 15 (of 36 total)
  • Author
    Posts
  • #1555516
    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

    #1555643
    Leo
    Staff
    Customer Support

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

    #1555681
    Leo
    Staff
    Customer Support

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

    #1555707
    Leo
    Staff
    Customer Support

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

    #1555715
    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

    #1555737
    Leo
    Staff
    Customer Support

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

    Let me know 🙂

    #1555753
    Duncan

    Hi Leo

    I’ve now separated the two widgets.

    Thanks

    Duncan

    #1556920
    Leo
    Staff
    Customer Support

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

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

    #1556949
    Duncan

    Hi Leo

    Thanks for getting back to me.

    I’ve activated the parent theme as requested.

    Duncan

    #1557021
    Leo
    Staff
    Customer Support

    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?

    #1557040
    Duncan

    Hi Leo

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

    What else should I now do?

    Duncan

    #1557307
    Leo
    Staff
    Customer Support

    Is the parent theme still activated?

    I’m seeing some issues on your site.

    #1557534
    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

Viewing 15 posts - 1 through 15 (of 36 total)
  • You must be logged in to reply to this topic.