Merge pull request #1556 from ASU/uds-1751

Uds 1751-  Fix footer styles

Author: davidornelas11

packages/component-header-footer/src/footer/index.styles.js

@@ -111,15 +111,17 @@ 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);
     align-items: center;
 
     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);

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