[Resolved] Mobile Logo

[Andy]

Hi,
I’m using the hide-on-mobile, hide-on-tablet and hide-on-desktop classes to display a different logo for mobiles.

Currently the mobile logo displays all the way upto 767px, I would like to change that to a max of 480px and then display the desktop/tablet logo on anything 481px+.

I’m comfortable with CSS but not quite sure how to approach this one.

[Tom]

Try this CSS:

@media (min-width: 481px) {
    .hide-on-mobile {
        display: block !important;
    }
}

[Andy]

Thanks but with this added I see both mobile and desktop/tablet logos between 481px and 767px.

[Tom]

Any chance you can link me to the page?

[Andy]

URL: http://tinyurl.com/h7943yu

[Tom]

This might work better:

@media (max-width: 480px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (max-width: 1024px) and (min-width: 481px) {
    .hide-on-tablet {
        display: none !important;
    }
}

[Andy]

Almost, but now between 481px and 767px neither logo displays, its a real brain teaser this one :s

[Andy]

I figured it out, just had to also add:

@media (max-width:767px) {
	
	.hide-on-mobile {
    display: block!important;
   }
}

[Tom]

Glad you got it working – it was a brain teaser for some reason lol

[Author]

Posts