Difference between revisions of "M365/test1"
< M365
Jump to navigation
Jump to search
| Line 6: | Line 6: | ||
} | } | ||
| − | /* Create | + | /* Create two equal columns that floats next to each other */ |
.column { | .column { | ||
float: left; | float: left; | ||
| − | width: | + | width: 50%; |
padding: 10px; | padding: 10px; | ||
height: 300px; /* Should be removed. Only for demonstration */ | height: 300px; /* Should be removed. Only for demonstration */ | ||
| Line 21: | Line 21: | ||
} | } | ||
| − | /* Responsive layout - makes the | + | /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ |
| − | @media screen and (max-width: | + | @media screen and (max-width: 600px) { |
.column { | .column { | ||
width: 100%; | width: 100%; | ||
| Line 30: | Line 30: | ||
}} | }} | ||
| − | <h2>Responsive | + | <h2>Responsive Two 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> | <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> | ||
| Line 40: | Line 40: | ||
<div class="column" style="background-color:#bbb;"> | <div class="column" style="background-color:#bbb;"> | ||
<h2>Column 2</h2> | <h2>Column 2</h2> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<p>Some text..</p> | <p>Some text..</p> | ||
</div> | </div> | ||
</div> | </div> | ||
Revision as of 22:19, 4 March 2023
Responsive Two 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..
