How do you stop a footer from riding up on the Service Portal Login Page

zag · ‎12-10-2020

I created a footer for our Service Portal. Its rather large so I have the Fixed Footer turned off on the Theme.

The problem occurs before a user logs into the portal, the footer rides up to be just under the portion of the visible text because the content in the center is for authenticated users only. See image below.

Because there is no content between the Header and Footer, all the graphics are scrunched at the top.

Turning on the Fixed Footer option fixes it but it looks terrible for the logged in user because it is such a big footer that it takes up a lot of real-estate. Is there anyway to define the footer in the Theme so that is is move to the bottom of the screen regardless of the screen content?

Pranav Bhagat · ‎12-10-2020

Hi Zag

Try this

HTML

<div class="footer">
  <p>Footer</p>
</div>

CSS

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: blue;
   color: yellow;
   text-align: center;
}

Check another example

https://startbootstrap.com/snippets/sticky-footer-flexbox

Regards

Pranav

zag · ‎12-10-2020

this is the HTML code Im dealing with , can't figure out where to put the <p>

!doctype html>
<html>

<head>
<meta charset="utf-8">

<title>Page Footer</title>
</head>
<body>
<table width="100%" style="background: #272727; font-family: museoSans-900, sans-serif; font-size: 15px; font-weight: 300; color: #3e4343; line-height: 20px !important; padding: 20px;">
<tbody>
<tr width="100%" style="padding-bottom: 30px; padding-top: 30px;">
<td width="60%" style="padding-bottom: 30px; padding-top: 30px;"><a href="https://www.xxxx.com" target="_blank" style="text-decoration: none"><img src="https://www.xxxx.com/wp-content/uploads/2018/12/xxxxW-190x79.png" alt="xxxx Logo" height="79" width="190"></a></td>

<td colspan="2" style="text-align: right; padding-bottom: 30px; padding-top: 30px;"><a href="https://www.facebook.com/xxxxMarketing/" target="_blank" style="text-decoration: none"><img src="https://www.xxxx.com/wp-content/uploads/2018/12/thumbnail-social-facebook-22x46.png" width="13" style="margin: 0 15px 0 15px;"></a>

<a href="https://twitter.com/xxxx" target="_blank" style="text-decoration: none"><img src="https://www.xxxx.com/wp-content/uploads/2018/12/thumbnail-social-twitter-50x42.png" alt="xxxx Twitter" width="30" style="margin: 0 15px 0 15px;"></a>

<a href="https://www.youtube.com/c/xxxxmktg/" target="_blank" style="text-decoration: none"><img src="https://www.xxxx.com/wp-content/uploads/2018/12/thumbnail-social-youtube-58x40.png" alt="xxxx YouTube" width="30" style="margin: 0 15px 0 15px;"></a>

<a href="https://www.linkedin.com/company/xxxxmarketing/" target="_blank" style="text-decoration: none"><img src="https://www.xxxx.com/wp-content/uploads/2018/12/thumbnail-social-linkedin-52x46.png" alt="xxxx LinkedIn" width="30" style="margin: 0 15px 0 15px;"></a>
</td></tr>
<tr><td colspan="3" style="
height: 1px;
border: 0;
border-top: 2px solid #3e4343;
padding: 00px 0 0px 0;"> </td></tr>

<tr width="100%"><td width="60%" style="font-size: 15px; line-height: 20px !important;">&copy 2021 xxxx LLC. All rights reserved</td>

<td width="20%" style=" text-align: center;font-size: 15px; line-height: 20px !important;"><a href="https://www.xxxx.com/xxxx-privacy-notice/" target="_blank" style="text-decoration: none; color: #3e4343; padding-right: 20px; font-size: 15px; line-height: 20px !important;"><div style="font-size: 15px; line-height: 20px !important;">Privacy Policy</div></a></td>

<td width="20%" style="font-size: 15px; line-height: 20px !important; text-align: center;"><a href="https://www.xxxx.com/sitemap/" target="_blank" style="text-decoration: none; color: #3e4343; font-size: 15px; line-height: 20px !important;">Sitemap</a></td></tr>
</tbody>
</table>

</body>
</html>

John VanBruggen · ‎04-29-2021

On the Theme configuration for your portal, there are two checkboxes.
Check them and it will affix the header and footer.

Check out my Consultant's Survival Guide
https://youtube.com/watch?v=zYi8KhP9SUk

tanvi1 · ‎09-02-2021

Hi,

I have the same problem. Did you find the solution. I had applied user criteria on page. I have removed that but even then it is creating the same issue