Merge pull request #12 from vbeskrovnov/fix_layout

Adjusted layout to eliminate horizontal scrolling and enhance margin settings
webrtcHacks · Mar 4, 2024 · 59b8023 · 59b8023
2 parents 0582611 + cf7a059
commit 59b8023
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/include/sdpDisplay.css b/include/sdpDisplay.css
@@ -10,6 +10,10 @@
     margin: 1px !important;
     padding: 5px 10px 5px 10px !important;
 }
+.container {
+    width: 100% !important;
+    max-width: none !important;
+}
 
 /******app CSS classes******/
 .section-label {
@@ -33,7 +37,7 @@
 }
 
 #description {
-    margin-left: 10px;
+    margin-right: 15px;
     margin-bottom: 5px;
     position: fixed;
     overflow-wrap: normal;

diff --git a/index.html b/index.html
@@ -11,19 +11,21 @@
     <script type="text/javascript" src="include/sdpDisplay.js"></script>
 </head>
 <body>
-    <div class="row">
-        <div class="col-sm-12">
-            <h1>Anatomy of a WebRTC SDP</h1>
-            <p>See the source post by Antón Román for more details.</p>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-sm-8">
-            <div id="lines" class="well"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12">
+                <h1>Anatomy of a WebRTC SDP</h1>
+                <p>See the source post by Antón Román for more details.</p>
+            </div>
         </div>
-        <div class="col-sm-4">
-            <div id="description">
-                Click/Hover your cursor at a code/line to view its description.
+        <div class="row">
+            <div class="col-sm-8">
+                <div id="lines" class="well"></div>
+            </div>
+            <div class="col-sm-4" >
+                <div id="description">
+                    Click/Hover your cursor at a code/line to view its description.
+                </div>
             </div>
         </div>
     </div>