How to add space between footer and the last widget in service portal

[Nagashree5]

Hi All,

I'm building a new portal for a scoped application. I want to add some space between the footer and the last widget. currently it is like below.

The purple color one at the end is the footer, between the Highlights and the footer, I want to add some space like below image.

Im not sure how to achieve this, Can anyone please guide me how I can create the space between the footer and the last widget.

Thanks in advance,

Nagashree.

[Sonu Parab · Accepted solution]

Hi @Nagashree5 ,
1] You can try     in your html script.
For Example: 
<span ng-if="item.price != '$0.00'" class="pull-right item-price font-bold"></span>  &nbsp;

2] OR you can use margin-top: 50px; for footer code in CSS.       // Adjust according to your preference.

If I could help you with your Query then, please hit the Thumb Icon and mark as Correct !!
Thank You.

[Nagashree5]

Hi @Sonu Parab ,

Thanks for the Response.

Below is my HTML code for the footer, could you please guide me to add.

<div class="sample-footer1">
<div class="row vertical-center overflow-fix">
<div class="col-md-12" class="footer-item">
<div class="col-lg-2 col-md-1 col-sm-0">

</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<h4 class="footer-item">Copyright 2021 TechnipFMC</h4>
</div>
<div class="col-lg-1 col-md-2 col-sm-0">

</div>
<div class="col-lg-4 col-md-6 col-sm-12" style="padding: 0px;">
<div class="footer-item col-md-4 col-fix" ng-repeat="item in data.items">
<a ng-href="{{item.href}}" target="_blank"><h4>{{item.text}}</h4></a>
</div>
</div>
<div class="col-lg-2 col-md-1 col-sm-0">

</div>
</div>
</div>

<!--
<div class="leftbox">
<img src="TechnipFMC_white_small.png" width="163" height="30"/>
</div>
<div class="rightbox">
<a href="/sp_technipfmc" class="right-link">For iSolv requests, click here</a>
</div>
-->

</div>

I have add the margin-top: 50px; in the CSS code but seems like it is not working, Below is the CSS code, Could you please have a look below.

.sample-footer1 {
background-color: #512D6D;
color: white;
height:60px;
padding:10px;

a {
color: white !important;
}
}

.col-fix {
padding-left: 5px;
padding-right: 5px;
}

.overflow-fix {
width: 100%;
}

.footer-item {
text-align: center;
}

.vertical-center {
@media only screen and (min-width: 992px) {
transform: translateY(50%);
}
}

h4 {
font-weight: 600;
}
.input-group .form-control {
margin-top: 12px;
}

Thanks in Advance,

Nagashree.

[Sonu Parab]

Hi @Nagashree5 ,
adjust margin of footer in CSS using below class. Comment your above highlighted code .(.input-group .form-control)


.sample-footer1 {
background-color: #512D6D;
color: white;
height:60px;
padding:10px;
margin-top: 50px;    // Adjust from here


If I could help you with your Query then, please hit the Thumb Icon and mark as Correct !!
Thank You.

[Nagashree5]

Thank you so much@Sonu Parab , It is working.