ghiwar

cssblade

Jan 15th, 2020
143
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.81 KB | None | 0 0
  1. .text-left{text-align:left!important}
  2. .row {
  3.   display: -ms-flexbox; /* IE10 */
  4.   display: flex;
  5.   -ms-flex-wrap: wrap; /* IE10 */
  6.   flex-wrap: wrap;
  7.   padding: 0 4px;
  8. }
  9.  
  10. /* Create four equal columns that sits next to each other */
  11. .column {
  12.   -ms-flex: 25%; /* IE10 */
  13.   flex: 25%;
  14.   max-width: 25%;
  15.   padding: 0 4px;
  16. }
  17.  
  18. .column img {
  19.   margin-top: 8px;
  20.   vertical-align: middle;
  21. }
  22.  
  23. /* Responsive layout - makes a two column-layout instead of four columns */
  24. @media screen and (max-width: 800px) {
  25.   .column {
  26.     -ms-flex: 50%;
  27.     flex: 50%;
  28.     max-width: 50%;
  29.   }
  30. }
  31.  
  32. /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  33. @media screen and (max-width: 600px) {
  34.   .column {
  35.     -ms-flex: 100%;
  36.     flex: 100%;
  37.     max-width: 100%;
  38.   }
  39. }
Add Comment
Please, Sign In to add comment