Енциклопедія Носівщини:Адаптивність.css
Матеріал з Енциклопедія Носівщини
/** Адаптивна перша сторінка */ /** https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex */
- {
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; }
}