Logo Size on Mobile

How do I adjust the logo size for mobile devices. Currently it's huge (www.caloansource.com)

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.logo img {
width: 100%;
}

 

It seemed to work on mobile, but now my logo is distorted on the homepage. Any idea how I can prevent the image from enlarging on the web?

 

Hello,

Undo your old customization and Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 767px) and (min-width: 480px){
.logo img {
width: 96%;
}
}
@media only screen and (max-width: 480px){
.logo img {
width: 96%;
}
}

Adjust its value as per your requirements.