Don't Show in Mobile or Tablet

[richie23]

Hi,

I’ve added a few extra elements to the header which cramp the design when rendered on a mobile / tablet. Is there any way to show these only on a desktop / not on a mobile device ?

I saw a previous example which used @media in the CSS but this isn’t working for me.

@media screen and (max-width: 600px) {
.oink-logo {
position:absolute;
top:-10%;
left:55%;
}
}

Thanks,

Richie

[Cosmin – SUPPORT]

Hi Richie,

Your example above applies only to screens smaller than 600px, not bigger 🙂 So it would be min-width, instead. And I would suggest a value such as 1200px, for desktops.

Also, you can take a look at Twitter Bootstrap and use their helper classes. For example, adding the class ‘visible-lg’ on an element will make it show up only on large screens (desktops)

Regards,

————————————————————————————————————

Cosmin – Support

[richie23]

Many thanks,

Will have a look at that.

Richie

[Melanie – SUPPORT]

Fantastic, let us know if there’s anything else we can do for you!