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.
