How to change the mobile logo in inStyle template

Hello, I'm using: Instyle for Joomla 3.x...
on my mobile device, the logo seem to extend to the far right...there isn't an option in the template in the backend to set logo for mobile devices...
Tried to look int mobile.css, small.desktop.css, small.tablet.css
like sugestion in this post: https://www.gavick.com/forums/instyle-j ... le#p196968

but don't know where in the code to change...

even change the overide.css, but doesn't work:
@media(max-width: 320px) {
#gkLogo.cssLogo {
width: 240px !important;
background-size: 100% !important;
}
}


please advise, thank you & God bless

Could you please post an url to your site?

Could you please post an url to your site?

http://debidesign.com/msmcatholic/

Try adding this code at the top of the override.css:

Code: Select all

#gkLogo img {max-width: 100%}
@media (max-width: 1040px) {
    #gkLogo img {max-width: 80%}
    #gkMobileMenu {margin-top: 0px !important;}
    #gkTopNav {display: none;}
    #gkHeader > div:first-child {
        min-height: inherit;
    }
}


thank you, that works ok...it decreases the logo to fit the size of the screen...making quite small & out of proportion for the design...is there a way to choose a different image for the mobile device? Like the setting for "Touch devices image" in the template backend?

Thank you for the quick response...God bless.

Try adding this code at the top of the override.css:

Code: Select all

#gkLogo img {max-width: 100%}
@media (max-width: 1040px) {
    #gkLogo img {max-width: 80%}
    #gkMobileMenu {margin-top: 0px !important;}
    #gkTopNav {display: none;}
    #gkHeader > div:first-child {
        min-height: inherit;
    }
}


You can use media queries to set another image, even it's size in override.css for mobile devices (max width of the screen). But to do so you would need to use css logo instead of image one.