Difference between revisions of "Team:Mingdao"

Line 16: Line 16:
 
     box-sizing: border-box;
 
     box-sizing: border-box;
 
}
 
}
−
/* Create three unequal columns that floats next to each other */
+
/* Create three equal columns that floats next to each other */
 
.column {
 
.column {
 
     float: left;
 
     float: left;
−
     padding: 0px;
+
    width: 33.33%;
−
     height: 400px; /* Should be removed. Only for demonstration */
+
     padding: 10px;
−
}
+
     height: 300px; /* Should be removed. Only for demonstration */
−
.left, .middle {
+
−
  width: 25%;
+
−
}
+
−
. right {
+
−
  width: 30%;
+
 
}
 
}
  
Line 34: Line 29:
 
     display: table;
 
     display: table;
 
     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%;
 +
    }
 
}
 
}
  
Line 251: Line 253:
 
     </div>
 
     </div>
  
−
 
+
<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 left" style="background-color:#4f0505;">
+
   <div class="column " style="background-color:#4f0505;">
 
     <h2>Brief Introduction</h2>
 
     <h2>Brief Introduction</h2>
 
     <video playinline muted id="vid" autoplay loop="loop">
 
     <video playinline muted id="vid" autoplay loop="loop">
Line 259: Line 261:
 
     </video>
 
     </video>
 
   </div>
 
   </div>
−
   <div class="column middle" style="background-color:#4f0505;">
+
   <div class="column " style="background-color:#4f0505;">
 
     <h2>Column 2</h2>
 
     <h2>Column 2</h2>
 
     <video playinline muted id="vid" autoplay loop="loop">
 
     <video playinline muted id="vid" autoplay loop="loop">

Revision as of 03:12, 12 October 2018

HOME
Description
≈

Syringe

GFP System

Mosquito Immune Signaling

AMP System

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).

Brief Introduction

Column 2

DM