Archived topic
Mobile Logo
8 replies · Started by Andy on February 9, 2017
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.
Try this CSS:
@media (min-width: 481px) {
.hide-on-mobile {
display: block !important;
}
}Thanks but with this added I see both mobile and desktop/tablet logos between 481px and 767px.
Any chance you can link me to the page?
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;
}
}Almost, but now between 481px and 767px neither logo displays, its a real brain teaser this one :s
I figured it out, just had to also add:
@media (max-width:767px) {
.hide-on-mobile {
display: block!important;
}
}Glad you got it working - it was a brain teaser for some reason lol
