How to resize logo for mobile view in Sydney

Hello,

We use Sydney theme and I would like to use Static front page with an image in the header area, and same header for the other pages.

The recommended image size for the a header is 1920 * 600 px, but the size I would like to use is 1920 * 450.

When I use an image of that size it looks nice on a PC, but on a mobile phone (standing view) the logo gets higher than the image, and part is shown below the header image. I would like to decrease the logo size for mobile view. I searched the support forum and found in thread “Header overlays site content” this to be added to Additional CSS:

.site-header img.site-logo {
max-height: 100px !important;
}

It solves my problem in the mobile view but decreases the logo size also in PC view a bit. Is there a way to decrease logo size only for mobile?

Many thanks,
Hans Abrahamsson

Hello there,

To limit the CSS code modification only on mobile device, you can use media query. For example:


@media only screen and (max-width:767px) {

  .site-header img.site-logo {
    max-height: 100px !important;
  }

}

If you want to know more about specific device width you can use, please checkout this blog post.

Regards,
Kharis