Changes

Jump to navigation Jump to search
327 bytes removed ,  22:25, 4 March 2023
no edit summary
Line 1: Line 1:  
{{#CSS:
 
{{#CSS:
 +
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
<style>
Line 6: Line 7:  
}
 
}
   −
/* Create two equal columns that floats next to each other */
+
/* Create two unequal columns that floats next to each other */
 
.column {
 
.column {
 
   float: left;
 
   float: left;
  width: 50%;
   
   padding: 10px;
 
   padding: 10px;
 
   height: 300px; /* Should be removed. Only for demonstration */
 
   height: 300px; /* Should be removed. Only for demonstration */
 +
}
 +
 +
.left {
 +
  width: 25%;
 +
}
 +
 +
.right {
 +
  width: 75%;
 
}
 
}
   Line 19: Line 27:  
   display: table;
 
   display: table;
 
   clear: both;
 
   clear: both;
}
  −
  −
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  −
@media screen and (max-width: 600px) {
  −
  .column {
  −
    width: 100%;
  −
  }
   
}
 
}
 
</style>
 
</style>
 
}}
 
}}
   −
<h2>Responsive Two Column Layout</h2>
+
<h2>Two Unequal Columns</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 left" style="background-color:#aaa;">
 
     <h2>Column 1</h2>
 
     <h2>Column 1</h2>
 
     <p>Some text..</p>
 
     <p>Some text..</p>
 
   </div>
 
   </div>
   <div class="column" style="background-color:#bbb;">
+
   <div class="column right" style="background-color:#bbb;">
 
     <h2>Column 2</h2>
 
     <h2>Column 2</h2>
 
     <p>Some text..</p>
 
     <p>Some text..</p>
 
   </div>
 
   </div>
 
</div>
 
</div>

Navigation menu

GCwiki