[Support request] Text Widget alignment top bar and buttons

Home Forums Support [Support request] Text Widget alignment top bar and buttons

Home Forums Support Text Widget alignment top bar and buttons

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #597110
    Pat

    Hi

    I have a four questions I would be greatful you could answer for me
    Top bar widgets alignment.

    Firstly, on my website, I have an email address and phone number widgets on the top bar.
    The email address is on the left of the bar and mobile phone number is on the right. The problem is they are misaligned, in other words they will not stay on the one line in Desktop view. How can I resolve this please?

    The code for the mobile phone number is:
    Call us on +353 85 774 1180

    The code for the email address is:
    Email us at digitalconnectnow@gmail.com

    The same problem does not occur in Mobile View as one slots in under the other.

    My second question relates to buttons. I have the mobile phone button set up for click to call. In Mobile View if the user hovers over the button, the button raises slightly to show it is active and then my mobile brings up the number.

    However if the email is activated , the text turns black.

    My question, I would like the email link to behave in the same way as the telephone number. Could you help please?
    My third question is, when clicking the email address in my desktop and mobile view I get ‘Oops that Page cannot be found message’. Is there a way this can prevented?

    Finally, in Desktop view only, is there a way of neutralising the mobile phone button so when a user clicks on it is doesn’t do what is currently does which is take the user to an ,Oop this page cannot found’ screen.

    I’ve included a link to my website in this message

    Thanks in advance

    Pat

    GP Premium 1.6.2
    #597169
    David
    Staff
    Customer Support

    Hi Pat,

    Firstly lets fix all the issues with the email. You have double quotes around the button class. Also you need to use mailto in the href. So the correct markup should look a little like this:

    <a class="button" href="mailto:digitalconnectnow@gmail.com"><strong>Email us at digitalconnectnow@gmail.com</strong> </a>

    Tel number support varies from device to device browser to browser. So we could do something like this:

    <a class="button hide-on-desktop hide-on-tablet" href="tel:+353857741180"><strong>Call us on +353 85 774 1180</strong></a>
    <strong class="hide-on-mobile">Call us on +353 85 774 1180</strong>

    The first will only be displayed on Mobile, and the second only on Desktop.

    #598056
    Pat

    Hi David

    Thanks for coming back to me.

    I altered the code for the email and it worked perfectly. Both the email and mobile phone number are now on the same line on the top bar.

    And both now work as raised buttons when clicked on mobile.

    Thanks for that!

    I have two more questions:

    On the desktop screen when clicking the mobile phone number I receive a ‘This address was not understood’ screen.

    Is there anyway of neutralizing this button in Desktop View only

    And secondly, in Mobile View, there is a bit of a gap between the email address and mobile phone number which makes the top bar taller than I would want it on a mobile screen.

    Is there anyway of reducing this gap in the Mobile view

    Best regards

    Pat

    #598089
    David
    Staff
    Customer Support

    Hi Pat,

    If you use the HTML code i pasted above in place of the Phone number HTML you have in place then this should swap out the button for just the text link on desktop. If that is a problem then we can get round it by adding another class to the mobile button, name it what you wish. And i can provide CSS to make it unclickable on desktop.

    Let me know

    To reduce the gap we can minimise the padding on the buttons on mobile like so:

    @media (max-width: 768px) {
        .top-bar .inside-top-bar .button {
            padding: 5px 20px;
        }
    }
    #599205
    Pat

    Hi David

    The gap on the mobile screen is now fixed.

    Also the mobile phone number is now neturalized in Desktop view.

    Thanks for both of these fixes!

    Just one issue: when applying the code for the mobile number the mobile number dropped down a line causing it to be misaligned with the email address again.

    Could you provide a suggestion as to how to fix this please.

    Many thanks

    Pat

    #599244
    David
    Staff
    Customer Support

    Hi Pat,

    lets adjust the code for:

    <strong class="hide-on-mobile">Call us on +353 85 774 1180</strong>

    and add another class, of null-button to make it:

    <strong class="hide-on-mobile null-button">Call us on +353 85 774 1180</strong>

    And then add this CSS:

    .null-button {
        padding: 10px 20px;
    }
    #600223
    Pat

    Hi David

    I’m a bit lost if you could help please.

    I’m entering the code for the telephone into widget area using Appearance – Customiser but all I have seemed to have done is duplicate the mobile number in Desktop view and removed it altogether from Mobile view

    So what I’m seeing in the widget window in terms of code is

    <strong class=”hide-on-mobile”>Call us on +353 85 774 1180
    <strong class=”hide-on-mobile null-button”>Call us on +353 85 774 1180

    In terms of the CSS code you gave me, does that get entered into the widget area or into the Simple CSS plugin I have installed?

    Sorry about all the questions but I’m pretty new to CSS

    Thank
    Pat

    #600438
    Tom
    Lead Developer
    Lead Developer

    Hi Pat,

    I think you replaced the first link, which was the desktop link.

    Re-add what David provided above: https://generatepress.com/forums/topic/text-widget-alignment-top-bar-and-buttons/#post-597169

    Then only replace this line:

    <strong class="hide-on-mobile">Call us on +353 85 774 1180</strong>

    With this line:

    <strong class="hide-on-mobile null-button">Call us on +353 85 774 1180</strong>

    Let me know if this helps or not 🙂

    #604285
    Pat

    Hi Tom

    Thanks for this.

    All functionality works well now and mobile button has been neutralised on the desktop screen.

    Just one small point, as you will see from the top bar the mobile phone number and the email address are misaligned.

    I’d like them to appear on the same line if possible.

    Is there anything you can recommend?

    Many thanks

    Pat

    #604541
    Tom
    Lead Developer
    Lead Developer

    Try wrapping the desktop phone number in the same button HTML: <a class="button" href="your-phone-number">Text here</a>

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