Archived topic

Mobile Header Icon in Mobile Phone View Mode Is VERY Small compared With Desktop

4 replies · Started by Wayne on January 21, 2021

Viewing posts 1–5 of 5

January 21, 2021 at 4:02 am #1627517

Good day all,

My site was designed using GeneratePress Premium but am faced with a problem in that when the site is viewed on Mobile devices, the header icon is extremely small but when viewed in normal desktop mode is is fairly big and of a decent size. My site can be viewed at volksrust.net so you can see what I mean.

How can I sort this out that the size of the header logo will also be fairly big on mobile devices? What am I doing wrong? Will be grateful for your wisdom and advice given that I am only a baby at the trade.

Warmest regards and thanking you in advance.

January 21, 2021 at 4:27 am #1627545

Hi there,

OK so a few steps:

1. Add this CSS:

@media(max-width: 768px) {
    /* Minimum logo width and reduce space between logo and title */
    .site-header .site-branding-container .site-logo {
        min-width: 120px;
        margin-right: 10px;
    }
    /* Reduce tag line font size */
    .site-header .site-description {
        font-size: 12px;
    }
}

2. In Customizer > Layout > Header , select the Mobile tab and reduce the padding to 10px. I would probably leave 20px on the right, as your logo image has white space around it, and this will compensate for that.

3. If you want reduce the Mobile font size of the Customizer > Typography > Header >>> Site Title.

January 22, 2021 at 3:40 pm #1629892

Dear David

Thank you for replying so quickly. Will attempt to do what you have said when I can get just a little more time on my hands.

January 23, 2021 at 2:18 am #1630122

You're welcome

February 25, 2021 at 6:03 pm #1673046

Thank you!

This archived topic is closed to new replies.

Start building better websites today.