Make logo larger than grid allows

Hi! Is it possible to make the logo larger than the header grid allows? I saw someone else post similar question here and you advised them to use this CSS:

.header .logo img {
width: 54%;
margin-left: 198px;
}

Which I did---except I made logo 100% and I didn't need the left margin.

I tried making logo 110%, 120% etc but it stays the same size. I don't want to make it specific pixel width because it becomes no longer responsive.

I know there's a hidden grid. Is it possible to go into the PHP and change the header grid so it allows logo to be larger without messing up the site or responsiveness?

http://evergreenplumbingri.com/

 

OK I found the CSS. If anyone else needs this it is:

.header .logo img {
max-width: 140%;
width: 140%;
}

(change the % per your needs)

Unfortunately, while that fixes the desktop site, it makes the logo on the mobile site no longer responsive. The logo is getting cut off on the right. Anyway to fix this?

Do I just need to adjust the logo.jpg file itself? (Upload a larger file and then change everything back to 100%)?

 

Hi,

Please paste the code given below in Custom CSS field of your dashboard.

Code:

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

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

That worked beautifully! Thank you so so much!!!

 

You're welcome..

Thanks & Regards!
Priyanka
InkThemes.com