Home>Support>Full Height Row and Fixed Footer

Full Height Row and Fixed Footer

Hi,

After users have hit SEND on the following contact form..

Contact

…I’d like the footer on the “Thanks for contacting us….” page to be fixed at the bottom and the row to extend the full height of the screen. I’ve tried setting the contact form row height to 100% but this doesn’t seem to work. I’ve also tried targeting several other elements (post-383, pl-383 & #contact-form-fd0e) with CSS but none have worked.

Any help would be greatly appreciated.

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 10 months, 20 days ago Alex S Hi, I Work Here

    Hi Razorpig,

    This isn’t actually possible as the contact form doesn’t provide context (outside of the form itself) for when a contact form has successfully submitted. As such, our only option is to always be like this for this page. Please add the following CSS to WP AdminAppearanceCustom CSS:

    .page-id-383 #pg-383-0 .panel-row-style {
    	min-height: 82vh;
    }
    
    .page-id-383 .site-footer {
    	position: absolute;
    	bottom: 0;
    }
    

    How does that look?

    You might also need to install the SiteOrigin CSS Editor.

  2. 10 months, 16 days ago razorpig

    Hi Alex,

    Thanks for the suggestion. I really appreciate it. It very nearly worked.

    The footer was fixed at the bottom of browser window but it obscured the SEND button, and when I scrolled down the footer moved up the page so the SEND button remained obscured.

    PLEASE NOTE : I tested your solution on an offline copy of the original website. I’ve since uploaded a completely re-built version of the site that uses a child theme and an associated style.css file. I also tested your solution on the new site by adding the code to the style.css file instead of using Custom CSS plugin but it didn’t work at all on this new site. I modified the page ids etc. I also tried adding !important to each CSS but again this didn’t help.

    Based on your suggestion, I may be able so sort this out. If not, I’ll start a new thread as the site has totally changed.

    Many thanks again for your time ;-)

  3. 10 months, 14 days ago Alex S Hi, I Work Here

    Hi Razorpig,

    Hm, let’s applying 100px of spacing to the content area (which is roughly the size of the footer) so that, no matter what, it shouldn’t ever appear below that area. Please add the following CSS to WP AdminAppearanceCustom CSS:

    .page-id-129 #main.site-main {
    	padding-bottom: 100px;  /* Ensure the footer doesn't overlap */
    }
    

    Can you send me a link to the page where the CSS doesn’t work at all?

  4. 10 months, 13 days ago razorpig

    Hi Alex,

    Thanks again for your time. I uploaded the new site to the old URL so you can find it here :

    http://razorweb.co.uk/contact/

    This site looks almost the same as the original except this one is built using a child theme. I’ve put all your code in the Custom CSS plugin. We’re getting close I think – just not quite there.

    This is the same site where the code didn’t work at all but I was entering the code in to the child theme style.css file. It should still work I think but for some reason it didn’t. I can troubleshoot that later. One thing at a time! ;-)

    Cheers for now

  5. 10 months, 13 days ago razorpig

    Hi Alex,

    I just noticed that adding the 100px padding makes the footer look huge on a normal page. Note that the background colour is the same colour as the footer.

    From an aesthetic point of view, I did this purposely as it may provide an alternative solution. The “Thanks for contacting us” page doesn’t look too bad now as the footer colour just continues to the bottom of the page, so you get a nice kind of widescreen effect.

    I’d still like to pursue the fixed footer/full height row solution though. I’m sure it’ll be helpful for me and hopefully for others too.

  6. 10 months, 13 days ago Alex S Hi, I Work Here

    Hi Razorpig,

    Oh, sorry, I forgot to prepend a page ID to the selector. Please try the updated CSS in my last reply.

  7. 10 months, 13 days ago razorpig

    Oh of course! I should have figured that one out :-/ I’ve inserted the updated code but the footer still moves up the page when scrolling…

  8. 10 months, 13 days ago Alex S Hi, I Work Here

    Hi Razorpig,

    Hm. Try adding the following CSS:

    html, body.page-id-129 {
    	height: 100%;
    }
    
    .page-id-129 #page {
    	min-height: 100%;
    	position: relative;
    }
    
  9. 10 months, 13 days ago razorpig

    Hey Alex, I added that but it’s still moves up the page….

  10. 10 months, 13 days ago Alex S Hi, I Work Here

    Hi Razorpig,

    Please try the updated version my the last CSS provided (there was a typo).

  11. 10 months, 13 days ago razorpig

    Oh so close! Thanks again Alex. The footer isn’t fixed on the initial Contact page, which is exactly what I wanted :-) On the “Thanks for contacting us” page the footer is perfect but the page scrolls up slightly after loading so the text is obscured.

  12. 10 months, 13 days ago razorpig

    Maybe add padding to the top?

  13. 10 months, 10 days ago Alex S Hi, I Work Here

    Hi Razorpig,

    Sorry for the delay.

    Try setting the row id for the row that houses the contact form to contact-form-95a2. Please open the row by clicking the wrench icon and then head over to the row styles sidebar. Open the Attribute settings group and set the row id to contact-form-95a2 now save.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More