updated dotted background bar to be around comments

MozillaFoundation · Sep 23, 2021 · 571aa01 · 571aa01
1 parent 0db35a5
commit 571aa01
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html
@@ -260,17 +260,7 @@ <h2 class="h3-heading">{% trans "Artificial Intelligence" %}</h2>
           </section>
         {% endif %}
 
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="container-fluid position-relative">
-  <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 product-section-padding-x">
-          {% if product.updates.count > 0 %}
+                  {% if product.updates.count > 0 %}
           <h3 class="h2-heading mb-4 mb-md-5">{% trans "News" %}</h3>
           {% endif %}
           {% if product.updates.count > 0 %}
@@ -313,16 +303,27 @@ <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>
       </div>
     </div>
   </div>
 </div>
+{% endif %}
 
 {% endwith %}
 {% endblock %}

diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss
@@ -108,7 +108,7 @@
   }
 }
 
-.product-section-padding-x {
+.comment-section-padding-x {
   padding-left: 18px;
   padding-right: 18px;