Page 1 of 1

How do I hide this from Mobile?

Posted: Thu Aug 25, 2016 5:55 am
by simonmlewis

Code: Select all

<div class='home-column mobile'>
<div class='home-column-inner'>
<div class='home-column-image'><img src='/images/head-contact.jpg' alt='contact '/></div></div>
</div>
So this DIV needs to show on all PCs and tablets.
But on mobile, I want it to disappear.

I thought if I added the " mobile", and then in the CSS for mobile widths, I added:

Code: Select all

<style>
.home-column mobile
{
display: none;
}
</style>
It would do it. But it doesn't.

Re: How do I hide this from Mobile?

Posted: Thu Aug 25, 2016 6:35 am
by Celauran
Set a display none in your media query?

Re: How do I hide this from Mobile?

Posted: Thu Aug 25, 2016 6:56 am
by simonmlewis
Is that not what I have done in my CSS? It's not picking it up. I Assume I have done it right then?

Re: How do I hide this from Mobile?

Posted: Thu Aug 25, 2016 7:26 am
by Celauran
You need to replace that space with a dot. I had missed that. You're targeting an element that has both classes. The way you have it written would hide a mobile element that is a child of an element of class home-column

Code: Select all

.home-column.mobile {
  display: none;
}

Re: How do I hide this from Mobile?

Posted: Thu Aug 25, 2016 7:36 am
by simonmlewis
Now I've learnt something! Thanks. :)