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

[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

[David]

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

[Duncan]

Thanks David

Your help is much appreciated.

[David]

You’re welcome

[Author]

Posts