1. Home
  2. Knowledge Base
  3. FAQ
  4. FAQ
  5. Change logo size (smaller screens)

Change logo size (smaller screens)

All of our themes include an auto resize feature for the header logo. On smaller screens, where the screen width is less than 768px wide the image will be resized to be smaller than that shown on desktop devices. For example in the Engrave theme the logo is restricted to a maximum height of 40px.

To change the logo size from the default restricted size we’ll need to add some custom css. Simply add the following custom css to your site using either a child theme or directly from the theme options panel under General Settings -> Custom CSS.

Please change the value of 40px to a value of your choice.

@media only screen and (max-width: 768px) {
#logo img {
max-height: 40px;
}
}

If a theme has an alternate header style (e.g. Minamaze Pro) then please use the following custom css when applying the alternative header layout:

@media only screen and (max-width: 768px) {
.header-style2 #logo img {
max-height: 40px;
}
}

Note: Refer to Change logo size to learn how to change the logo size for devices wider than 768px.

Still need support?

Use the search form above to explore more articles.

If you have an urgent support query please do submit a support ticket and one of our devs will be on hand to help.