|
|
Line 1: |
Line 1: |
| <style>
| |
| /* CSS to control the layout of elements on larger screens */
| |
| @media (min-width: 768px) {
| |
| .element-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| }
| |
| .colored-box {
| |
| flex: 1 1 calc(50% - 10px); /* Adjust the width and spacing as needed */
| |
| margin-right: 10px; /* Spacing between elements */
| |
| }
| |
| .colored-box:last-child {
| |
| margin-right: 0;
| |
| }
| |
| }
| |
|
| |
| /* CSS to control the layout of elements on smaller screens */
| |
| @media (max-width: 767px) {
| |
| .colored-box {
| |
| flex: 1 1 100%;
| |
| margin-right: 0;
| |
| margin-bottom: 10px; /* Spacing between elements */
| |
| }
| |
| }
| |
| </style>
| |
|
| |
|
| <div class="element-container"> | | <div class="element-container"> |