Align footer menu items on EC portal

kpanchal
Tera Contributor

Hello,

I'm trying to align the footer menu items with the equal and proper spacing. for the footer as shown below:

kpanchal_0-1695328362529.png

The code I've is :

HTML:

<div class="scrub-footer" ng-if="c.data.footer && c.data.footer.sysId && showFooter">

   <!-- Menu Section -->
  <div class="sf-main"  ng-if="c.data.footer.logo || (c.data.footer.menus.navigation_links.length)">
    <!-- Logo Section -->
    <div class="sf-logo-container" ng-if="c.data.footer.logo">
      <img ng-if="c.data.footer.logo.imageUrl"
           ng-src={{c.data.footer.logo.imageUrl}}
           class="sf-logo image-flex">
      <div class="sf-logo-content">
         <p ng-bind-html="c.data.footer.logo.content"></p>
      </div>
    </div>

     <!-- Menu links Section -->
         <div class="sf-group-title" ng-attr-id="{{menu.sysId}}">
    <a href="http://example.com demo">Test</a>
</div>
  <!-- Footer Bottom Section -->
  <div class="sf-bottom" ng-if="(c.data.footer.menus.bottom_links && c.data.footer.menus.bottom_links.length) || (c.data.footer.menus.social_icons && c.data.footer.menus.social_icons.length) || c.data.footer.copyright">
    <div class="sf-bottom-left">
      <div ng-repeat="menu in c.data.footer.menus.bottom_links" class="inline-block">
       <div class="sf-bottom-link" ng-repeat="link in menu.menuItems">
          <a ng-href={{link.href}} ng-class="{'external-link': link.isExternalLink}" ng-attr-target="{{(link.isExternalLink) ? '_blank' : undefined}}">{{link.label}}</a>
         </div>
      </div>
    </div>

    <div class="sf-bottom-right">
      <div class="sf-social-icons">
        <div ng-repeat="menu in c.data.footer.menus.social_icons" class="inline-block">
         <a class="sf-social-icon" ng-class="'fa fa-' + link.glyph + (link.isExternalLink ? ' external-link' : '')"
               ng-attr-target="{{(link.isExternalLink) ? '_blank' : undefined}}"
               title={{link.label}}
               ng-href={{link.href}}
               ng-repeat="link in menu.menuItems"
               aria-label="{{link.label}}"></a>
        </div>
      </div>
      <div class="sf-copyright">{{c.data.footer.copyright}}</div>
    </div>
   </div>
</div>

CSS: 

 

/*$footer-main-background: $sp-navbar-divider-color !default;*/
$footer-main-background: #0a0a0a !default;
$footer-main-text-color: #ffffff !default;
$footer-main-title-color: #ffffff !default;
$footer-main-title-font-size: $font-size-md !default;
$footer-main-link-color: #ffffff !default;
$footer-main-link-font-size: $font-size-small !default;
$footer-link-color: $navbar-inverse-link-color !default;
$footer-link-hover-color: $navbar-inverse-link-hover-color !default;
$footer-focus-ring-color: #ffffff !default;
$footer-bottom-background: $navbar-inverse-bg !default;
$footer-bottom-font-size: ceil(($font-size-base * 0.75)); !default; // $font-size-xs
$sp-space--xxl: 32px !default;

.a{
  color:white;
}
.sf-links;
{
  padding-left: 400px;
}
.masonry-root
{
padding-left: 400px;
}
.fa {
  position:absolute;
  left: 5px;
  top: 20px;
  width:12px;
  text-align: center;
}
.scrub-footer {
  .sf-main {
    background: $footer-main-background;
    display: flex;
    color: $footer-main-text-color;
    margin-top: $sp-space--xxl;

    /* Logo section */
    .sf-logo-container {
      width: 277px;
     /* padding: 2rem 0;*/
     
      .sf-logo {
        max-width: 100%;
        padding: 1rem 1.4rem;
        display: block;
      }
      .sf-logo-content {
        /*padding: 1rem 1.4rem;*/
        word-break: break-word;
        font-size: 1.2rem;
      }
    }

    /* Group link section */
    .sf-links-container {
      flex: 1;
     /* padding-top: 3.4rem;*/
      .sf-group {
        width: 22rem;
        padding: 0 1.4rem ;
        .sf-group-title {
          color: $footer-main-title-color;
          font-size: $footer-main-title-font-size;
          font-weight: bold;
          padding-bottom: 1.6rem;
          
        }
        .sf-link {
          /*padding-bottom: 1.6rem;*/
          right-padding:400px;
          a {
            display: inline-block;
            color: $footer-main-link-color;
            /*opacity: 0.7;*/
            font-size: $footer-main-link-font-size;
            word-break: break-word;
            &:hover {
              color: $footer-link-hover-color;
            }
            &:focus {
              outline: 2px solid $footer-focus-ring-color;
              outline-offset: 5px;
              box-shadow: none;
            }
          }
        }
      }
    }
  }

  /* Footer bottom section */
  .sf-bottom {
    background: $footer-bottom-background;
    color: $footer-link-color;
    font-size: $footer-bottom-font-size;
    display: flex;
    .sf-bottom-left {
      flex: 1;
      .sf-bottom-link a {
        color: $footer-link-color;
        font-size: $footer-bottom-font-size;
        &:hover {
          color: $footer-link-hover-color;
        }
        &:focus {
          outline: 2px solid $footer-focus-ring-color;
          outline-offset: 5px;
          box-shadow: none;
        }
      }
    }
    .sf-bottom-right {
      display: flex;
      .sf-social-icons {
        padding: 27px 0;
        .sf-social-icon {
          color: #fff;
          padding: 0;
          margin: 0 0.8rem;
          font-size: $font-size-large;
          &:focus {
            outline: 2px solid $footer-focus-ring-color;
            outline-offset: 5px;
            box-shadow: none;
          }
        }
      }
    }
  }

  .sf-bottom-link,
  .sf-copyright {
    display: inline-block;
    padding: 27px 11.5px;
  }
  .inline-block {
    display: inline-block;
  }
}

/* Masonry layout */
.masonry-root {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

 /* IE 10-11 specific Class to override */
@media screen and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {
  .masonry-root {
    max-height: 100% !important;
    .masonry-cell {
      display: -ms-inline-flexbox;
      flex-direction: column;
      -ms-flex-wrap: wrap;

      .sf-group-title {
        width: 100%;
      }
    }

    &:after {
      content: "";
      clear: both;
      display: table;
    }
  }
}

@media (max-width: 850px) {
  .scrub-footer {
    .sf-main .sf-links-container .sf-group {
      width: 15rem;
      padding-bottom: 22px;
    }

    .sf-bottom {
      padding: 18px 11px;
      .sf-bottom-link {
        padding: 0 8px 11px 8px;
      }
      .sf-bottom-right .sf-social-icons {
        flex: 1;
        padding: 0;
        .sf-social-icon {
          margin: 0 8px 0.8rem 0.8rem;
        }
      }
      .sf-bottom-left {
        display: block;
      }
      .sf-copyright {
        padding: 0 18px;
      }
    }
    .sf-links-container {
      padding-top: 3.4rem;
    }
    .sf-separator {
      flex: 0;
    }
  }
}


@media (max-width: 430px) {
  .scrub-footer {
    .sf-main, .sf-bottom {
      display: block;
    }
    .sf-main {
      flex-direction: column;
      .sf-links-container {
        padding-top: 0;
        .sf-group {
          width: 15rem;
       }
      }
    }
  }
}

Please help to align these footer items.

 

0 REPLIES 0