Archived topic

Telephone Number & Email Address Header Alignment on Mobile

3 replies · Started by Duncan on July 21, 2020

Viewing posts 1–4 of 4

July 21, 2020 at 1:23 pm #1371338

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

July 22, 2020 at 12:44 am #1371758

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

July 22, 2020 at 4:16 am #1371943

Thanks David

Your help is much appreciated.

July 22, 2020 at 5:48 am #1372023

You're welcome

This archived topic is closed to new replies.

Start building better websites today.