fix the issue with small logo in the footer on mobile screens

wri · Dec 4, 2024 · e4e0847 · e4e0847
1 parent b7ff19d
commit e4e0847
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/components/layout/footer.js b/components/layout/footer.js
@@ -48,20 +48,20 @@ const Footer = () => {
                 <span>Phone +1(202) 729-7600</span>
                 <span>Fax: +1 (202) 720 7610</span>
               </p>
+            </div>
 
-              <div className="footer-links">
-                <Link href="/terms" prefetch={false} legacyBehavior>
-                  {intl.formatMessage({ id: 'terms.title' })}
-                </Link>
-                <span> | </span>
-                <Link href="/privacy-policy" prefetch={false} legacyBehavior>
-                  {intl.formatMessage({ id: 'Privacy Policy' })}
-                </Link>
-                <span> | </span>
-                <button type="button" onClick={handleCookiePreferencesClick} className="c-link-button">
-                  {intl.formatMessage({ id: 'Cookie Preferences' })}
-                </button>
-              </div>
+            <div className="footer-links">
+              <Link href="/terms" prefetch={false} legacyBehavior>
+                {intl.formatMessage({ id: 'terms.title' })}
+              </Link>
+              <span> | </span>
+              <Link href="/privacy-policy" prefetch={false} legacyBehavior>
+                {intl.formatMessage({ id: 'Privacy Policy' })}
+              </Link>
+              <span> | </span>
+              <button type="button" onClick={handleCookiePreferencesClick} className="c-link-button">
+                {intl.formatMessage({ id: 'Cookie Preferences' })}
+              </button>
             </div>
           </div>
         </div>

diff --git a/css/components/layout/_footer.scss b/css/components/layout/_footer.scss
@@ -7,6 +7,7 @@
     color: $color-white;
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
   }
 
   .footer-item {
@@ -105,6 +106,8 @@
     .footer-item {
       &.wri-contact-details {
         p {
+          margin-bottom: 0;
+
           @include breakpoint(small only) {
             font-size: $font-size-small;
 
@@ -139,6 +142,8 @@
     .footer-links {
       margin-top: $space-1 * 2;
       white-space: nowrap;
+      flex-basis: 100%;
+      text-align: right;
 
       a, .c-link-button {
         color: $white;

diff --git a/e2e/cypress.config.js b/e2e/cypress.config.js
@@ -7,7 +7,7 @@ module.exports = defineConfig({
   viewportWidth: 1280,
   viewportHeight: 720,
   env: {
-    pluginVisualRegressionMaxDiffThreshold: 0.03,
+    pluginVisualRegressionMaxDiffThreshold: 0.036,
   },
   e2e: {
     baseUrl: 'http://localhost:4000',