fix(storefront): BCTHEME-479 Logo on AMP Product details page (PDP) d…

…oes not fit header (#2054)
bigcommerce · Jun 3, 2021 · 95e25cc · 95e25cc
1 parent fac0cf4
commit 95e25cc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Logo on AMP Product details page (PDP) doesn't fit header. [#2054](https://github.com/bigcommerce/cornerstone/pull/2054)
 - Translation Gap: Compare page fields (Description, Rating and Availability). [#2059](https://github.com/bigcommerce/cornerstone/pull/2059)
 - Translation Gap: Compare products error message. [#2061](https://github.com/bigcommerce/cornerstone/pull/2061)
 - Translation Gap: Gift Certificate -> Code required message. [#2064](https://github.com/bigcommerce/cornerstone/pull/2064)

diff --git a/templates/components/amp/common/store-logo.html b/templates/components/amp/common/store-logo.html
@@ -10,7 +10,7 @@
                 {{#if (last (split theme_settings.logo_size 'x')) 'gtnum' (first (split theme_settings.logo_size 'x')) }}
                     sizes="(max-width: 360px) 100vw, 1vw"
                 {{else}}
-                    sizes="(max-width: 360px) 100vw, 10vw"
+                    sizes="(max-width: 768px) 15vw, 10vw"
                 {{/if}}
                 layout="responsive"
             {{/if}}

diff --git a/templates/components/amp/css/header.html b/templates/components/amp/css/header.html
@@ -25,15 +25,28 @@
     align-items: center;
 }
 
+.amp-header-logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    max-height: 55px;
+    padding-right: 3.92857rem;
+}
+
 .amp-header-link {
     display: inline-block;
     text-decoration: none;
+    vertical-align: middle;
 }
 
-.amp-header-logo {
-    flex-grow: 1;
-    padding-right: 3.92857rem;
-    text-align: center;
+.amp-header-link amp-img {
+    max-height: 55px;
+}
+
+.amp-header-link amp-img img {
+    min-width: auto;
+    width: auto;
 }
 
 .amp-empty-space {