Difference between revisions of "M365/test1"

From wiki
Jump to navigation Jump to search
Line 22: Line 22:
  
 
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
 
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
+
@media screen and (max-width: 900px) {
 
   .column {
 
   .column {
 
     width: 100%;
 
     width: 100%;

Revision as of 21:17, 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..