XF 1.2 Hide content between specified widths

[Valhalla]

Is it possible to hide content between specified window widths, but in more than one case?

This is the code from my EXTRA.css file:

.newImage
{
    text-align: center;
}

@media (max-width: 952px) and (min-width: 800px),
{
  .newImage {
    display: none;
    visibility: hidden;
  }
}

That works correctly, but I wish to extend the behaviour further. I wish to hide the content again at 799px until "0px".

 

[1BJK903]

Why don't you use max-width 800px as an adittional media query than?

 

[Lukas W.]

So if you want to hide it from 952 to 800 and from 799 to 0, why don't you simply hide it from 952 to 0?

@media (max-width: 952px)

 

[Valhalla]

Because the max-width of my page is 952px. I want the content to be hidden the instant the user begins to collapse the page size.

But I want the content to be visible again at 800px, but then to be hidden again at 799px from there on in (would be up to 0px).

The reason for this is because there is a moment at 800px when the sidebar becomes hidden, and so there would be sufficient space to display my content. But while the sidebar is visible, this would not be possible.

 

[Valhalla]

I got this working using the media queries more than once (didn't know that would work).

@media (min-width: 952px) {
  .categoryText {
    display: none;
    visibility: hidden;
  }
}

@media (max-width: 800px) and (min-width: 799px){
  .categoryText {
    display: none;
    visibility: hidden;
  }
}


@media (max-width: 952px) and (min-width: 801px)
{
  .categoryImage {
    display: none;
    visibility: hidden;
  }
}

@media (max-width: 799px) and (min-width: 0px)
{
  .categoryImage {
    display: none;
    visibility: hidden;
  }
}

 

[Lukas W.]

//Do Stuff with the forum here

@media (width: 800px), (min-width: 952px) {
//Do Stuff for the forum here at 800px width and anything above 952px width, overriding the attributes defined before.
}