[Resolved] Telephone Number & Email Address Header Alignment on Mobile

Home Forums Support Telephone Number & Email Address Header Alignment on Mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1371338
    Duncan

    Hi

    Looking for some assistance.

    When you view my website on desktop, laptop, and tablet it’s displaying fine.

    However, when you view the site on iPhone the email icon and email address in the header is split over 2 lines, and I would like it to display on the one line.

    I’d also like to know how to stop being able to move the site from left to right, and top to bottom, when you touch the screen on mobile. Hopefully this makes sense…

    Any help would be much appreciated.

    Thanks in advance

    #1371758
    David
    Staff
    Customer Support

    Hi there,

    1. you can reduce the Customizier > Layout > Header –> Padding just for mobile by switching to mobile preview. This will provide more horizontal space. Then this CSS for reducing the font size:

    @media(max-width: 768px) {
        .header-widget .textwidget {
            font-size: 14px;
        }
    }

    2. Try this to fix the overflow scrolling:

    html, body {
        box-sizing: border-box;
    }
    body * {
        box-sizing: inherit;
    }
    #1371943
    Duncan

    Thanks David

    Your help is much appreciated.

    #1372023
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.