Logo Size on mobile

[linalakk]

How can i make Logo block smaller for mobile view? It covers most of the screen and its hard for customer to make a order.

[Andy]

You can make the image have a maximum height or width, with some custom CSS code.

maximum height:

@media only screen and (max-width: 768px) {
    img.custom-logo {
        max-height: 100px;
        width: auto;
    }
}

or use maximum width if you prefer:

@media only screen and (max-width: 768px) {
    img.custom-logo {
        max-width: 150px;
    }
}

The custom CSS should be added to ‘Customize’ > ‘Additional CSS’.
Change the max-height or max-width size to your own preference.

[Author]

Posts