[Resolved] How to make logo responsive

[George]

The logo on desktop looks fine but on mobile devices, it’s very large proportionally to the other content. Please look at how it looks: https://genderunicorns.com/

How to make it more responsive?

[iQfy Media]

Add this to your custom css:

@media (max-width: 570px)
{
.site-header .header-image{max-width:90px;}
}

The new logo max-width kicks in when the screen has lower width than (in this case) 570px. Adjust values to taste.

[Ying]

Hi George,

You can try this CSS:

@media (max-width: 768px) {
    .site-header .header-image {
        max-width: 100px;
    }
}

Hi iQfy Media,

Thanks for help 🙂

[George]

looks great, thanks to both of you 🙂

[Ying]

No problem 🙂

[Author]

Posts