7703- Fixed spacing issues on product pages (#7840)

* 7703- Fixed spacing issues on product pages * fixes fix
MozillaFoundation · Nov 15, 2021 · 3a56492 · 3a56492
1 parent 6d3cdde
commit 3a56492
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html
@@ -52,9 +52,9 @@
     </div>
     {% endif %}
 
-    <div class="bg-white py-3 tw-px-6">
+    <div class="bg-white tw-pb-4 tw-pt-5 tw-px-6">
       <div class="row intro mb-4">
-        <div class="tw-flex tw-space-x-2 tw-flex-wrap tw-px-4 tw-mb-4">
+        <div class="tw-flex tw-gap-2 tw-flex-wrap tw-px-4 tw-mb-4">
           {% for cat in product.product_categories.all %}
             {% with category=cat.category %}
               {% localizedroutablepageurl home_page 'category-view' category.slug as cat_url %}
@@ -155,7 +155,7 @@ <h3 class="tw-mb-4 tw-font-zilla tw-text-2xl tw-leading-7 tw-flex tw-items-cente
                           <img src="{% static "_images/buyers-guide/icon-info-circle.svg" %}" alt="{% trans "information" context "icon description for screen readers" %}" class="tw-h-4 tw-w-4 tw-ml-2 tw-mb-1">
                         </a>
                       </h3>
-                      <div class="row">
+                      <div class="row tw-space-y-4 medium:tw-space-y-0">
                         {% trans "Camera"          as camera %}
                         {% trans "Microphone"      as microphone %}
                         {% trans "Tracks location" as tracks_location %}
@@ -176,7 +176,7 @@ <h3 class="tw-mb-4 tw-font-zilla tw-text-2xl tw-leading-7 tw-flex tw-items-cente
                   <section class="criterion">
                     <h3 class="tw-mb-4 tw-font-zilla tw-text-2xl tw-leading-7">{% trans "What can be used to #?" %}</h3>
 
-                    <div class="row">
+                    <div class="row tw-space-y-4 medium:tw-space-y-0">
                       {% trans "Email"               as email %}
                       {% trans "Phone"               as phone %}
                       {% trans "Third-party account" as third_party_account %}
@@ -200,7 +200,7 @@ <h3 class="tw-mb-4 tw-font-zilla tw-text-2xl tw-leading-7">{% trans "What can be
                   <section class="criterion">
                     <h3 class="tw-mb-4 tw-font-zilla tw-text-2xl tw-leading-7">{% trans "What data does the company collect?" %}</h3>
 
-                    <div class="row">
+                    <div class="row tw-space-y-4 medium:tw-space-y-0">
                       {% trans "Personal"      as personal_data_collected %}
                       {% trans "Body related"     as biometric_data_collected %}
                       {% trans "Social"        as social_data_collected %}
@@ -245,7 +245,7 @@ <h3 class="tw-mb-4 tw-font-zilla tw-text-2xl tw-leading-7">{% trans "What data d
                 <div class="tw-w-full tw-flex-shrink-0 tw-px-7" data-product-label="1">
                   {% localizedroutablepageurl home_page 'methodology-view' as min_sec_url %}
                   {% blocktrans with url=min_sec_url|add:"#minimum-security-standards" asvar minimum_security_standards trimmed %}
-                    Does this product meet our <a id="mss-link" class="tw-ml-1" href="{{ url }}">Minimum Security Standards</a>?
+                    Does this product meet our <span class="tw-ml-1"></span> <a id="mss-link" class="" href="{{ url }}">Minimum Security Standards</a>?
                   {% endblocktrans %}
                   {% include "fragments/product_criterion.html"  with  show_value_as_symbol=False   value=product.meets_minimum_security_standards|yes_no   help=""   label=minimum_security_standards|safe   ding=product.show_ding_for_minimum_security_standards info=min_sec_url  %}
 

diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss
@@ -29,7 +29,7 @@
       content: "";
       position: absolute;
       top: 24px;
-      right: 24px;
+      right: 32px;
       background: url(../_images/buyers-guide/icon-privacy-ding.svg) center /
         contain no-repeat;
       width: 47px;
@@ -39,6 +39,7 @@
         top: 40px;
         width: 63px;
         height: 80px;
+        right: 30px;
       }
 
       @at-root html[lang="de"] & {