• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Hide content between specified widths

Valhalla

Well-known member
#1
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:

Code:
.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".
 

Valhalla

Well-known member
#4
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

Well-known member
#5
I got this working using the media queries more than once (didn't know that would work).

Code:
@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;
  }
}