CSS to separate desktop from Mobile not working

[Archbob]

The page in question is this:
https://www.goodfreephotos.com/people/people-standing-on-top-of-salt-mounds.jpg.php

I have this in my stylesheet:

@media (min-width:800px) {
    .desktopstuff{
        display:block !important;
    }
}
 
//small screen sizes
@media (max-width: 799px) {
    .mobilestuff{
        display:block !important;
    }
 
    .desktopstuff{
        display:none !important;
    }
}

and this in my actual page:

<div class="desktopstuff">

google code here
</div>

and yet it still shows up on mobile, why?
My mobile Iphone 5 is not 800px in width.

[Gandalf]

It’s not usual to use media queries for both desktop and mobile. Usually you would start with the CSS for either desktop or mobile and then use media queries for the other - if that makes sense!

You shouldn’t need to use !important either.

[SamA74]

A few points. I don’t like those “double sided” queries, it’s an over-complication IMO. I prefer to have default code (not within any query) and then have queries for the non-default stats only.

Why !important everything? You just make things difficult for yourself, when all is important, important loses its meaning and everything has ultra heavy specificity which is a nightmare to work with.

Do you really want to show/hide a lot of content for different devices? It’s best just to re-style as much of the very same content as you can.

But anyway, something like:-

<div class="desktopstuff">
  Desktop
</div>
<div class="mobilestuff">
  Mobile
</div>

With:-

.desktopstuff {
  display: none;
}
@media (min-width: 800px) {
  .desktopstuff {
    display: block;
  }
  .mobilestuff {
    display: none;
  }
}

…works with less confusing code.

[Archbob]

Its just for a ad-block from google. I basically want a block at the top of the page to display for desktop and one at the bottom to display for mobile.

[Archbob]

Thanks,
The desktop only thing worked, but the mobile only one didn’t, still shows up for desktop.

[SamA74]

@Archbob

I basically want a block at the top of the page to display for desktop and one at the bottom to display for mobile.

That’s fair enough for minor elements like that.

@Archbob

The desktop only thing worked, but the mobile only one didn’t, still shows up for desktop.

Maybe need to see it in context of the whole page and css. The snippet I posted works on its own.

[PaulOB]

@Archbob

The desktop only thing worked, but the mobile only one didn’t, still shows up for desktop.

It seems to be working as shown here:

You do have a lot of work for mobile as there are a lot of over-sized elements to make responsive. If ever you see a horizontal scrollbar on the viewport then you need to adjust the content so that it fits better because a horizontal scrollbar will break mobile display.