XF 2.1 Our logo shrinks really tiny in mobile viewports. How do we make it bigger?

[tribedude]

How can I control the size of our logo when someone visits our site from a phone?

Currently our logo shrinks to a really tiny size.

Ideally, we would like our logo larger in a phone viewport. How do we do this?

Thanks,

 

[Ozzy47]

This is what I have and it works well:

// ########################### FULL SIZE LOGO ON MOBILE ########################
.p-nav-smallLogo {
    display: none !important;
}
.p-header-logo {
    max-width: none !important;
}
.has-js .p-header {
    display: block;
}

 

[Max Taxable]

Extra dot less is the best.

 

[tribedude]

This is what I have and it works well:

// ########################### FULL SIZE LOGO ON MOBILE ########################
.p-nav-smallLogo {
    display: none !important;
}
.p-header-logo {
    max-width: none !important;
}
.has-js .p-header {
    display: block;
}

Where do we put this?

 

[Lukas W.]

Where do we put this?

Appearance > Styles > [Your Style] > Templates > Search for extra.less template

 

[tribedude]

This is what I have and it works well:

Thanks! That works so nicely and our mobile experience is so much better now.

 

[Ozzy47]

Glad it helped you.