Logo Size is not responsive


#1

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


#2

Hi,

can you post your site URL?


#3

Hey Awan,

It is socialmonk.org

Mandy


#4

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;
  }
}

#5

Hey Awan,

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

Mandy