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

[Wayne]

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.

[David]

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.

[Wayne]

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.

[David]

You’re welcome

[Wayne]

Thank you!

[Author]

Posts