style.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. body {
  2. background-color: #f2f2f2;
  3. }
  4. /* If you want the content centered horizontally and vertically */
  5. /*.centered {
  6. position: absolute;
  7. top: 50%;
  8. left: 40%;
  9. transform: translate(-50%, -50%);
  10. text-align: center;
  11. margin: 10;
  12. }
  13. .header_centered {
  14. position: absolute;
  15. top: 8%;
  16. left: 50%;
  17. transform: translate(-50%, -50%);
  18. text-align: center;
  19. margin: 10;
  20. }
  21. .thick-border {
  22. border: 3px solid black;
  23. border-collapse: collapse;
  24. }*/
  25. /* Style the image inside the centered container, if needed */
  26. img {
  27. max-width: 100%;
  28. }
  29. .images{
  30. flex: 1 1 auto;
  31. min-width: 15em;
  32. max-width: 800px;
  33. }
  34. .container {
  35. display: flex;
  36. flex-wrap: row wrap;
  37. }
  38. .column {
  39. flex: 1;
  40. /*for demo purposes only */
  41. background: #f2f2f2;
  42. border: 1px solid #e6e6e6;
  43. box-sizing: border-box;
  44. }
  45. .column-one {
  46. order: 1;
  47. }
  48. .column-two {
  49. order: 2;
  50. }
  51. .column-three {
  52. order: 3;
  53. }
  54. @media (max-width: 50em) { /* 2 x 15em (.text & .images) + 2em (left & right margin of the body element) + 1em (.text margin-right) */
  55. .container {flex-wrap: wrap}
  56. }