Forráskód Böngészése

2.2 Adding responsivity for XS devices.

Frederic G. MARAND 9 éve
szülő
commit
7df4dda8f7
1 módosított fájl, 6 hozzáadás és 6 törlés
  1. 6 6
      index.html

+ 6 - 6
index.html

@@ -15,7 +15,7 @@
       </div>
 
       <div class="row">
-        <div class="col-md-8">
+        <div class="col-xs-12 col-md-6">
           <h2>The fastest way to space</h2>images
           <p>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
 
@@ -23,25 +23,25 @@
           <button>Book Tickets now</button>
         </div>
 
-        <div class="col-md-3 col-md-offset-1">
+        <div class="visible-md visible-lg col-sm-6">
           <a class=thumbnail href="images/blasting-off.png"><img src="images/blasting-off.png" /></a>
         </div>
       </div>
 
       <div class="row">
-        <div class="col-md-4">
-          <h3>Boot Today!</h3>
+        <div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0">
+          <h3>Book Today!</h3>
           <p>Even if you're traveling tomorrow, you can still get tickets today. We have
             a number of conveniently located ports around the globe to service everyone.</p>
         </div>
 
-        <div class="col-md-4">
+        <div class="col-xs-6 col-sm-4">
           <h3>Go anywhere</h3>
           <p>If you need to get to space today, why not try out a transporter? Despite
             the claims, there has been no deaths in the last 6 weeks!</p>
           </div>
 
-        <div class="col-md-4">
+        <div class="col-xs-6 col-sm-4">
         <h3>RocketBus&reg;</h3>
         <p>For cheapest fares, catch the next RocketBus&reg; to the stars. Cheaper on
           your wallet, and easiest way to make friends.</p>