Difference between revisions of "M365/test1"
< M365
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
{{#CSS: | {{#CSS: | ||
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | <style> | ||
* { | * { | ||
| Line 20: | Line 20: | ||
clear: both; | clear: both; | ||
} | } | ||
| + | |||
| + | /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ | ||
| + | @media screen and (max-width: 600px) { | ||
| + | .column { | ||
| + | width: 100%; | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
}} | }} | ||
| − | <h2>Three | + | <h2>Responsive Three Column Layout</h2> |
| + | <p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p> | ||
| + | |||
<div class="row"> | <div class="row"> | ||
<div class="column" style="background-color:#aaa;"> | <div class="column" style="background-color:#aaa;"> | ||
<h2>Column 1</h2> | <h2>Column 1</h2> | ||
| − | <p> | + | <p>Some text..</p> |
</div> | </div> | ||
<div class="column" style="background-color:#bbb;"> | <div class="column" style="background-color:#bbb;"> | ||
<h2>Column 2</h2> | <h2>Column 2</h2> | ||
| − | <p> | + | <p>Some text..</p> |
</div> | </div> | ||
<div class="column" style="background-color:#ccc;"> | <div class="column" style="background-color:#ccc;"> | ||
<h2>Column 3</h2> | <h2>Column 3</h2> | ||
| − | <p> | + | <p>Some text..</p> |
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
Revision as of 21:44, 4 March 2023
Responsive Three Column Layout
Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).
Column 1
Some text..
Column 2
Some text..
Column 3
Some text..
</body> </html>
