put n-divs next to each others on large screens and one below each others on small screens

Question

I am struggling to achieve this efect ;

I would like to put n-divs next to each others if the screen is big enough , and one below each other otherwise , and I would li

Answer 1

you can use the css media tag to check for screen size but it might not be compatible with old browser

@media only screen and (max-width: 1023px) {
}

@media only screen and (min-width: 1024px) {
}

see CSS media queries for screen sizes

i'Ve updated your fiddle with this code AFTER the 'normal' styling so it will over write the 'default' display for your class

@media only screen and (max-width: 300px) {
  .homepage-top-category-container-list{ /*This should be the container*/
  display: block;
  }
}

https://jsfiddle.net/9atbtj0L/1/

if you use the zoom in/out of your browser you will see it in action.

hope this helps

Answer 2

I think that you're looking for flex-wrap:wrap.

According to the MDN reference:

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.

.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/ 
    background-color: green;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto; 
    }
.homepage-top-category-container-title{
    background-color: black;
    margin-bottom: 10px;
    }
#homepage-top-category-container-title{
    color: orange;
    }
.homepage-top-category-container-list{ /*This should be the container*/
    display: flex;
    flex-wrap:wrap;
    height: auto;
    margin-left: auto;
    margin-right: auto; 
    background-color: yellow;
    }
.homepage-top-category-container-item{
    display: block;
    float: none;
    width: auto;
    height:auto;
    border: solid 1px black;
}

<div class="homepage-wrapper">
    <div class="homepage-top-category-container">
        <div class="homepage-top-category-container-title">
            <span id="homepage-top-category-container-title">block title here</span>
        </div>
        <div class="homepage-top-category-container-list">
            <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
                block A
            </div>
            <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
                block B
            </div>
            <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
                block C
            </div>
            <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
                block D
            </div>
        </div>
    </div>
</div>

Answer 3

You can achieve this using media query.I have used 400px as the break point you can use as per your choice.Here is a working JSfiddle link https://jsfiddle.net/0f5y8q8b/

@media only screen and (min-width: 400px) {
    .homepage-top-category-container-item{
        width: 100%
    }
    .homepage-top-category-container-list{
      display:block
    }

}