Logo is Much Smaller After Upgrade From Andrina-Lite to Pro

The logo is much smaller. I would like it to appear as in the lite version.

When I added the following code to the custom css it made the logo the same size as it was in the lite version, but it did not resize for the responsive version and is off the page.

Code:

.header .logo img {
width: 320px;}

Can I keep the code in the custom css to make the the logo larger, but add code to make the logo resize for the responsive version? If so, what code would I use?

 

Hello,

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

Code:

@media only screen and (max-width: 480px){
.header .logo img {
width: 276px;}
}
 
@media only screen and (max-width: 960px) and (min-width: 767px){
.header .logo img {
width: 256px;}
}

 

Logos on non-responsive and responsive look great now! Thank you.