[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

  • This topic has 11 replies, 4 voices, and was last updated 2 years ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #929370
    Duncan

    Hi there

    I’m looking for some help and assistance.

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

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

    Can you therefore advise me how to fix this please?

    Please bare in my mind I’m a bit of a novice!

    Thanks in advance

    #929722
    Leo
    Staff
    Customer Support

    Hi there,

    Modify this:

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

    to

    @media (min-width: 769px) {
        .top-bar p {
            float: left;
            margin-left: 18px;
            margin-bottom: 10px;
        }
    }

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

    Let me know ๐Ÿ™‚

    #929836
    Duncan

    Hi Leo

    Many thanks, worked a treat.

    However, there now isn’t much space between the bottom of the Email address and the top of the logo, how do I more space?

    Thanks in advance.

    #929891
    Leo
    Staff
    Customer Support

    Hmm actually let’s try another method.

    Can you try adding the two elements as two separate Custom HTML widgets instead of using <p> tag?

    Then we should only need one CSS to tweak the position.

    Let me know ๐Ÿ™‚

    #929918
    Duncan

    Hi again Leo

    Thanks for the prompt response.

    Apologies for my ignorance but how do I do this? Way over my head to be honest!

    Thanks again

    #929948
    Duncan

    Hi Leo

    Just a quick update for you.

    I’ve managed to add the phone number and email address as two separate Custom HTML Widgets in the top bar after all and they sit where I want them too in desktop.

    However, in mobile and tablet mode they’re not aligned correctly. I’ve left in the amended code you sent me earlier so I take it this now needs modified?

    I would like the telephone number and email address to sit on the one line aligned to the right in tablet mode horizontal (same as currently displays on desktop), and in vertical tablet mode I would like them to sit on the one line aligned to the centre.

    On mobile horizontal mode I would like them to sit on the one line aligned to the centre, and in vertical mobile mode I would like them to sit on two lines aligned to the centre.

    Hopefully this all makes sense, you’re help and assistance is very much appreciated Leo!

    Thanks in advance

    #930012
    David
    Staff
    Customer Support

    Hi there,

    can you edit the Top Bar padding and put the left and right back to 10px. And the add this CSS to the Customizer > Additional CSS:

    .inside-top-bar {
        display: flex;
        justify-content: center;
    }
    .inside-top-bar aside:last-child {
        margin-left: 30px !important;
    }
    @media (min-width: 1024px) {
        .inside-top-bar {
            justify-content: flex-end;
        }
    }
    #930028
    Duncan

    Hi David

    Thanks for getting back to me, your help and assistance is very much appreciated.

    I’ve done as you suggested, however I’ve now got the following layout issues with the top bar:

    1. On desktop view (and tablet horizontal view) the right hand edge of the telephone number is now not aligned with the right hand edge of the “T” in the “CONTACT” link in the nav bar below.

    2. In vertical view on tablet, and horizontal view on mobile, it’s aligned to the centre which is great. However, I’d like to add some space between the foot of the email address and telephone number and the top of the logo below.

    3. In vertical view on mobile the top bar layout is all over the place.

    Again, hopefully this all makes sense.

    If you can therefore assist me further I’d really appreciate it.

    Thanks in advance

    #930031
    Duncan

    Hi again David

    Just a quick update, I managed to sort issue 1 outlined in my last message my adjusting the right top bar padding to 35px.

    Desktop and tablet horizontal layout is now therefore sitting correctly.

    However, if you can still assist me with points 2 and 3 outlined in my last message that would be great.

    Thanks

    #930049
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    2. You can adjust the mobile padding of the header element in Customize > Layout > Header. That will allow you to add top padding to the header.

    If you need to do it before 768px, you can use CSS like this:

    @media (max-width: 1000px) {
        .inside-header {
            padding-top: 40px;
        }
    }

    Adjust the 1000px as needed.

    3. That’s happening because there isn’t enough space for them to appear in line. You can try doing this:

    @media (max-width: 500px) {
        .inside-top-bar {
            flex-direction: column;
        }
    }
    #930061
    Duncan

    Hi Tom

    Thanks for your prompt reply and resolution, everything’s looking good now.

    From an SEO and best practice perspective does it matter if the additional CSS is inserted in the “Child: Stylesheet (style.css)”, or the “Additional CSS” section in the “Customise” section in the WordPress dashboard?

    Lastly, I’d like to thank you and your team for your help and assistance today, it’s been excellent.

    I’ve not been using GeneratePress for long so I appreciate the patience of you and your team.

    Thanks again

    #930418
    David
    Staff
    Customer Support

    Glad to hear you got it resolved.
    Best practice is to always use a child theme for your style.css – but a small amount ( less than 400/500 lines ) in Additional CSS is not a problem regarding performance.

    Glad you’re enjoying the service – feedback is really appreciated.

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