[John CParticipant]

I have a logo 400 x 135px that looks fine on larger (landscape) screens. If I set a width in customiser it shrinks the logo for all screens, not sure why, but if I do NOT enter a width the logo it looks the original size on most screens but is cut off on the right for mobile screens (portrait)

Hoping I could use a square variant of the logo for mobile devices and the rectangle logo for others screen sizes.

How can I do this?

See dev site details below:

Thanks
—
John

[John CParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! You can shrink the logo size for smaller screen.
You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 479px) {
.masthead-stacked .x-brand {
    width: 200px;
}
}

Hope this helps.

Cheers!

[Author]

Posts