Logo Size is not responsive

Experts!

My logo size is not responsive.
I wanted the size to be 1000 px on desktop and about 300px on mobiles.
Below code in style.css
.logo-image {
max-width: 1000px;
}
changed the logo size to 1000 on desktop.
To make it responsive, added below logic right underneath that code block
@media screen and (max-width: 1366px) {
img.logo-image {
max-width: 300px;
}
But then, the desktop logo size becomes 1000.
Tried changing the max-width to 350 above; didn’t work.
Am I missing something?

Confused,
Mandy

Hi,

can you post your site URL?

Hey Awan,

It is socialmonk.org

Mandy

Hi,
your media query are not working because its not match to the resolution of the mobile screen. try this:

@media screen and (max-width: 991px) {
  img.logo-image {
    max-width: 300px;
  }
}

Hey Awan,

It works! and it works good!
Thank you :slight_smile:

Mandy