[Solved] Setting sg-footer to bottom of page (not window) in mobile layout



Currently in mobile optimised format the sg-footer div (that contains the progress bar and next and back buttons) appears at the bottom of the device window.  I want to change it so that it appears consistently at the bottom of the page – as it does on desktop forms.  I am able to achieve some of what I want by using the custom CSS to set sg-footer’s position to initial and mark it !important, but this has two potential problems:

  1. It is a little inelegant to use the !important attribute.
  2. This does not seem to work consistently (for example the progress bar does not move with the rest of the div it is inside of)

Is there a better way of achieving my goal?

QMD204738 asked

    Best answer



    1. If you find yourself resorting to !important, the first place to look is your CSS selector. Unless you are overriding another !important rule earlier in the cascade, you probably don’t actually need to use it. A tip for overcoming this: use the same CSS selector as the rule you are trying to overwrite.
    2. Inspect the DOM further, and with some trial and error you can find out why the progress bar does not move with the rest of the div (answer: the `bottom` property).

    Here’s a snippet that worked pretty well for me (ignoring some minor padding and margin issues, which would be addressed separately):

    .sg-survey .sg-mobile-optimized .sg-footer,
    .sg-survey .sg-body.sg-int-virtual-page .sg-footer {
    position: initial;

    .sg-survey .sg-mobile-optimized .sg-progress-bar,
    .sg-survey .sg-body.sg-int-virtual-page .sg-progress-bar {
    bottom: initial;

    One thing to keep in mind is that the CSS `initial` value is not supported by Internet Explorer or Opera Mini:


    I hope this information is helpful.

    Nathan - Survey Astronaut answered


      Question stats

      • Active
      • Views4223 times
      • Answers1 answer
      • Followers0 followers