Lock and Change Footer Size | XM Community
Skip to main content
Solved

Lock and Change Footer Size


Hi!

Asking for help on how I can achieve the following:

  1. Change the footer sizing to be 10% of the page
  2. Lock the footer in place so it will appear even if it isnt the end of the page

Thank you in advance for any assistance.

Best answer by krbhavya

Hi @FEGC2023 

You can use below code to fix the footer

#Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

​you can also change the alignment acc. to your requirement.

View original

6 replies

krbhavya
Level 6 ●●●●●●
Forum|alt.badge.img+20
  • Level 6 ●●●●●●
  • 172 replies
  • June 20, 2023

Hi @FEGC2023 

You can below CSS code to change the footer size 

 

#Footer {

height: 10vh !important;

}


  • Author
  • 3 replies
  • June 20, 2023

Thank you @krbhavya, I changed my footer size.

Is there any way to make the footer appear at the bottom even as I scroll up or down?


krbhavya
Level 6 ●●●●●●
Forum|alt.badge.img+20
  • Level 6 ●●●●●●
  • 172 replies
  • Answer
  • June 20, 2023

Hi @FEGC2023 

You can use below code to fix the footer

#Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

​you can also change the alignment acc. to your requirement.


  • Author
  • 3 replies
  • June 20, 2023

This solved it, thank you again @krbhavya!

One last help, the footer blocks the next and back buttons, will I need to do an additional css for the bottons?


krbhavya
Level 6 ●●●●●●
Forum|alt.badge.img+20
  • Level 6 ●●●●●●
  • 172 replies
  • June 20, 2023

Hi @FEGC2023 

You can just simply change this to align the footer in centre

 

left: 50%;

 


  • Author
  • 3 replies
  • June 20, 2023

Thank you @krbhavya

I’ll experiment on the positionings.