diff --git a/packages/component-header-footer/src/footer/index.styles.js b/packages/component-header-footer/src/footer/index.styles.js
index 38b283b02..bc1160853 100644
--- a/packages/component-header-footer/src/footer/index.styles.js
+++ b/packages/component-header-footer/src/footer/index.styles.js
@@ -110,8 +110,9 @@ const StyledFooter = styled.footer`
     --endorsed-logo-display: block;
     --endorsed-logo-padding-top: 12px;
     --endorsed-logo-padding-bottom: 12px;
-    --endorsed-logo-img-max-height: 100%;
+    --endorsed-logo-img-max-height: 6rem;
     --endorsed-logo-img-width: 100%;
+    --endorsed-logo-img-max-width: 320px;
     padding-top: var(--endorsed-logo-padding-top);
     padding-bottom: var(--endorsed-logo-padding-bottom);
     display: var(--endorsed-logo-display);
@@ -119,6 +120,7 @@ const StyledFooter = styled.footer`
 
     img {
       width: var(--endorsed-logo-img-width);
+      max-width: var(--endorsed-logo-img-max-width);
       height: auto;
       max-height: var(--endorsed-logo-img-max-height);
       transform: scale(1.13);
diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss b/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
index d65dbe076..4f7874bfe 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
@@ -104,6 +104,7 @@ footer {
   --endorsed-logo-padding-bottom: 12px;
   --endorsed-logo-img-max-height: 100%;
   --endorsed-logo-img-width: 100%;
+  --endorsed-logo-img-max-width: 320px;
   @include media-breakpoint-up(md) {
     & {
       --endorsed-logo-display: flex;
@@ -120,6 +121,7 @@ footer {
 
   img {
     width: var(--endorsed-logo-img-width);
+    max-width: var(--endorsed-logo-img-max-width);
     height: auto;
     max-height: var(--endorsed-logo-img-max-height);
     /* Transform here scales an image which has embedded padding so that