User:Jason.nlw/testtemplate: Difference between revisions
Jump to navigation
Jump to search
Place
Any place whether natural or human made
Concept
Semantic unit understood in different ways
Life
Any living physical entity such as an animal, plant, fungus, or bacterium
Creation
Intentional intellectual or artistic creation
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 |
Revision as of 18:08, 22 July 2023
<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>