Update index.html

Author: ssameti3

src/index.html

@@ -746,35 +746,39 @@
       The allocated trips from all fragments within each hexagon were then summed to estimate the total number of trips associated with that hexagon. This approach ensures that trip totals are distributed spatially according to the actual geographic overlap between TAZs and hexagonal grid cells rather than relying on centroid-based assignment.
     </p>
       <div class="col-xs-12">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3">
+        <div class="row" style="margin-bottom:10px;">
+          <div class="col-xs-12 col-sm-3 text-center">
             <span style="font-size:12px;">Opacity:</span>
-            <input id="hexagonOpacitySlider" data-slider-id="hexagonOpacitySlider" type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="0.8"/>
+            <div style="display:inline-block; min-width:180px;">
+              <input id="hexagonOpacitySlider" data-slider-id="hexagonOpacitySlider" type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="0.8"/>
+            </div>
           </div>
           <div class="col-xs-12 col-sm-3 text-center">
-            <span style="font-size:12px;">Palette:</span>
-            <div id="hexagonColorRamp" class="ramp-selector">
+            <span style="font-size:12px; display:block; margin-bottom:4px;">Palette:</span>
+            <div id="hexagonColorRamp" class="ramp-selector" style="display:inline-block;">
               <!-- Color ramps will be added here -->
             </div>
           </div>
-          <div class="col-xs-12 col-sm-3 text-right" style="margin-top: 0.2in;">
-            <label style="font-size:12px;"><input type="checkbox" id="hexagonBoundaries" checked> Show Boundaries</label>
+          <div class="col-xs-12 col-sm-3 text-center" style="padding-top:18px;">
+            <label style="font-size:12px; margin-bottom:0;"><input type="checkbox" id="hexagonBoundaries" checked> Show Boundaries</label>
           </div>
-          <div class="col-xs-12 col-sm-3">
-            <span style="font-size:12px;">Base Map:</span>
-            <select id="hexagonBaseMap" class="form-control">
+          <div class="col-xs-12 col-sm-3 text-center">
+            <span style="font-size:12px; display:block; margin-bottom:4px;">Base Map:</span>
+            <select id="hexagonBaseMap" class="form-control" style="display:inline-block; width:auto; min-width:180px;">
               <option value="osm" selected>OpenStreetMap</option>
               <option value="esri">Esri Light Gray</option>
               <option value="carto">CartoDB Positron</option>
             </select>
           </div>
-        </div> <!-- end row -->
-        <div class="col-xs-12" style="margin-top:10px;">
-          <strong>Legend</strong>
         </div>
-        <div id="hexagonLegend" class="col-xs-12" style="margin-top:10px;"></div>
-        <div class="col-xs-12" style="text-align: center;">
-          <div id="hexagonMap" style="width:1180px;height:792px;margin-top:10px;display: inline-block;"></div>
+        <div class="row">
+          <div class="col-xs-12 text-center">
+            <div style="width:1180px; max-width:100%; display:inline-block; text-align:center;">
+              <div style="margin-top:10px;"><strong>Legend</strong></div>
+              <div id="hexagonLegend" style="margin-top:10px;"></div>
+              <div id="hexagonMap" style="width:1180px; max-width:100%; height:792px; margin-top:10px; display:inline-block;"></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>