Cloriato image resizing issues for mobile

Hello, I've purchased the Cloriato theme and generally it works great. However, some of the images on the site (including the logo, which is larger than the recommended size) do not resize to fit the mobile version (when using an iPhone).

My site is www.utahvalleycounseling.com

Examples include the main logo and images on these pages:

http://utahvalleycounseling.com/rates/

http://utahvalleycounseling.com/pornography-addiction/

I'm hoping to get all the images to automatically size down to fit the mobile screen. I'd like to use a larger logo than the recommended size as well and have it resize to fit the screen.

Thanks!

 

Hello,

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

Code:

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

 

Thank you, that works perfectly. Now, how about for other images on the site that aren't scaling right? For example, the image on this page:

http://utahvalleycounseling.com/rates/

Is there some kind of general format for Custom CSS that I can use when a given image isn't working correctly that I can generalize across any image or page?

 

Nevermind

I figured out out and took care of it. Thanks for your help!