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

Lock and Change Footer Size

  • June 19, 2023
  • 6 replies
  • 335 views
F
Level 2 ●●

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.

    6 replies

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

    Hi @FEGC2023 

    You can below CSS code to change the footer size 

     

    #Footer {

    height: 10vh !important;

    }

    Bhavya Kumar
      F
      Level 2 ●●
      • FEGC2023
      • Author
      • 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
        • krbhavya
        • Level 6 ●●●●●●
        • 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.

        Bhavya Kumar
          F
          Level 2 ●●
          • FEGC2023
          • Author
          • 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
            • krbhavya
            • Level 6 ●●●●●●
            • June 20, 2023

            Hi @FEGC2023 

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

             

            left: 50%;

             

            Bhavya Kumar
              F
              Level 2 ●●
              • FEGC2023
              • Author
              • June 20, 2023

              Thank you @krbhavya! 

              I’ll experiment on the positionings.

                Terms & ConditionsAccessibility statement