Енциклопедія Носівщини:Адаптивність.css

/** Адаптивна перша сторінка */

• {

 box-sizing: border-box;

}

/* Container for flexboxes */ .row {

 display: flex;
 flex-wrap: wrap;

}

/* Create four equal columns */ .column {

 flex: 25%;
 padding: 20px;

}

/* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) {

 .column {
   flex: 50%;
 }

}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {

 .row {
   flex-direction: column;
 }

}