updated dotted background bar to be around comments (#7450)

Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org>
MozillaFoundation · Oct 20, 2021 · ea790a7 · ea790a7
1 parent 7b7300d
commit ea790a7
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html
@@ -338,11 +338,21 @@ <h3 class="h2-heading mb-4">{% trans "Related products" %}</h3>
             {% endfor %}
           </div>
 
-          {% if use_commento %}
-          <h3 class="h2-heading mb-4">{% trans "Comments" %}</h3>
-          <div id="commento"></div>
-          {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
 
+{% if use_commento %}
+
+<div class="container-fluid position-relative comment-section">
+  <div class="row dotted-section d-block d-sm-flex mx-0">
+    <div class="container">
+      <div class="row">
+        <div class="{{section_class}} mt-5 pt-3 bg-white comment-section-padding-x">
+
+        <h3 class="h2-heading mb-4">{% trans "Comments" %}</h3>
+        <div id="commento"></div>
         </div>
 
 
@@ -352,6 +362,7 @@ <h3 class="h2-heading mb-4">{% trans "Comments" %}</h3>
     </div>
   </div>
 </div>
+{% endif %}
 
 {% if use_commento %}