Does not show flex to change if @media (max-width: 997px)



  • Is there depends on the browsers?

    .articles-list {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: stretch;
        .item {
            margin-top: 0;
            margin-right: 5px;
            margin-bottom: 20px;
            margin-left: 5px;
            align-self: flex-start;
            flex: 1 0 30%;
        }
    }
    

    @media screen and (max-width: 991px) {
    .item {
    flex: 1 0 48%;
    }
    }



  • .articles-list {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            align-content: stretch;
            .item {
                margin-top: 0;
                margin-right: 5px;
                margin-bottom: 20px;
                margin-left: 5px;
                align-self: flex-start;
                flex: 1 0 30%;
            }
    }
    
    @media screen and(max-width: 997px) { 
      .articles-list {
        .item {
            flex: 1 0 48%;
        }
      }
    }
    

    or

     .articles-list {
    
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: stretch;
        .item {
            margin-top: 0;
            margin-right: 5px;
            margin-bottom: 20px;
            margin-left: 5px;
            align-self: flex-start;
            flex: 1 0 30%;
    
          @media screen and(max-width: 997px) {   
              & {
                  flex: 1 0 48%;
              }
          }
        }
    

    }




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2