Align footer menu items on EC portal
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎09-21-2023 01:40 PM
Hello,
I'm trying to align the footer menu items with the equal and proper spacing. for the footer as shown below:
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