1. 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

Discussion in 'Styling and Customization Questions' started by Valhalla, Feb 20, 2014.

  1. Valhalla

    Valhalla Well-Known Member

    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".
     
  2. 1BJK903

    1BJK903 Active Member

    Why don't you use max-width 800px as an adittional media query than?
     
    Valhalla likes this.
  3. katsulynx

    katsulynx Well-Known Member

    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?
     
    Valhalla likes this.
  4. Valhalla

    Valhalla Well-Known Member

    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.
     
  5. Valhalla

    Valhalla Well-Known Member

    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;
      }
    }
    
     
  6. katsulynx

    katsulynx Well-Known Member

     
    Valhalla likes this.

Share This Page