983,993
edits
User:Jason.nlw/testtemplate: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| 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="colored-box"> | |||
<!-- First Element --> | <!-- First Element --> | ||
{{Colored box | {{Colored box | ||
| Line 14: | Line 39: | ||
</div> | </div> | ||
<div class="colored-box"> | |||
<div | <!-- Second Element --> | ||
<!-- | |||
{{Colored box | {{Colored box | ||
| background-content-color = #FFC72C | | background-content-color = #FFC72C | ||
| Line 29: | Line 53: | ||
</div> | </div> | ||
<div class="colored-box"> | |||
<div | <!-- Third Element --> | ||
<!-- | |||
{{Colored box | {{Colored box | ||
| background-content-color = #FFC72C | | background-content-color = #FFC72C | ||
| Line 41: | Line 64: | ||
</div> | </div> | ||
<div class="colored-box"> | |||
<div | <!-- Fourth Element --> | ||
<!-- | |||
{{Colored box | {{Colored box | ||
| background-content-color = #FFC72C | | background-content-color = #FFC72C | ||