Problem: Tezos page layout doesn't match new desing for mobile devices (

fractalide#207).

Solution: Update styles to Tezos page for match new design.

content/stake-pool/tezos-xtz.md

@@ -166,14 +166,14 @@
         </div>
     </div>
 </div>
-<div class="row">
-    <div class="col-sm-offset-2 col-sm-4 col-xs-offset-1 col-xs-5 text-center">
+<div class="row row-eq-height">
+    <div class="col-sm-offset-2 col-sm-4 col-xs-offset-1 col-xs-10 text-center">
         <div class="border_blue">
             <p class="text_dark_blue">Your Estimated Fractalide XTZ Stake Pool Rewards</p>
             <h2 class="sub_heading_blue">87.58 <img src="/img/stake-pools/tezos-currency-blue-min.png" width="18px"/></h2>
         </div>
     </div>
-    <div class="col-sm-4 col-xs-5 text-center">
+    <div class="col-sm-offset-0 col-sm-4 col-xs-offset-1 col-xs-10 text-center">
         <div class="border_blue">
             <p class="text_dark_blue">Your Estimated Fractalide XTZ Stake Pool Delegation Annual Reward Percentage</p>
             <h2 class="sub_heading_blue">8.8 %</h2>

themes/fractalide/files/css/bootstrap-fractalide.min.css

@@ -1385,3 +1385,16 @@ fieldset[disabled] .btn-primary.focus {
 .has-error .form-control-feedback {
   color: #ed7a7f;
 }
+
+.row-eq-height {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.row-eq-height > [class*="col-"] {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}

themes/fractalide/files/css/custom.css

@@ -564,12 +564,15 @@ section#tezos-xtz ul li {
 .border_blue {
     border: 1px solid #58B4CD;
     border-radius: 4px;
+    height: 100%;
+    padding: 0 15px 0 15px;
 }
 
 .math_formula {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
+    padding: 0 30px 0 30px;
 }
 
 .math_symbol {