Archived topic

Adding space between telephone number and email address in top bar

5 replies · Started by Duncan on August 30, 2021

Viewing posts 1–6 of 6

August 30, 2021 at 4:33 am #1912540

Hello

I'm looking for some assistance.

I would like to add some additional space between the end of the telephone number and the start of the email envelope icon in the top bar of my site.

Thanks in advance.

August 30, 2021 at 6:02 am #1912616

Hi there,

try adding this CSS:

.inside-top-bar i:nth-of-type(2) {
    margin-left: 20px;
}

August 30, 2021 at 8:57 am #1912947

Hi David

Thanks for your assistance, your CSS has solved the problem.

However, on vertical mobile mode the telephone number and email address are now split over two lines rather than one line.

I've tried to decrease the font size for mobile mode i.e. 'Customise - Typography - Top Bar', however when choosing font size for mobile it applies the same font size for desktop, tablet and mobile.

Hopefully this makes sense.

August 30, 2021 at 9:38 am #1912994

Hi Duncan,

Try this CSS for mobile:

@media (max-width: 768px) {
    .inside-top-bar .widget_block p {
        font-size: 11px;
    }
}

Let me know :)

August 30, 2021 at 10:00 am #1913008

Hi Ying

Thanks for your assistance, that's it fixed.

August 30, 2021 at 10:02 am #1913012

No problem :)

This archived topic is closed to new replies.

Start building better websites today.