Logo resize - mobile version

Issue

I'm trying to change the size of logo on my site (www.skyrox.pl) on mobile versions only.

I'm trying with this code, but it doesn't seem to work.

@media (max-width: 360px) {
    .header-main .logo {
        max-width: 50%;
        max-height: auto;
    }
}

Adding an additional CSS in WP Customize utility.

Solution

Target the img tag when applying CSS and increase mobile view width:

@media (max-width: 768px) {
  .header-main .logo img {
    max-width: 50%;
    max-height: 50px; /* Change as per needed */
 }
}

if still not working then try using !important:

@media (max-width: 768px) {
  .header-main .logo img {
    max-width: 50% !important;
    max-height: 50px; /* Change as per needed */
 }
}

Answered By - arifulsajib