Set button on home page to anchor to the bottom of the page

dfarmer

I have refreshed my site and I am trying to figure out one thing. I have a "View Photos" button on the homepage, in front of a full screen slideshow background. I am trying to have the button anchor to the bottom of the webpage so the placement looks good on all screen sizes. Right now all I can figure out is to add a spacer on the page to push the button down the page. Problem is if someone is on a big screen, the button is in the middle of the page.

Is there a way to anchor the button to the bottom of the page, with some margin, so it is always just a bit up from the bottom of the page?

Site is http://www.darekfarmerphotography.com

Thank you for any help!

Teach

What you could do is place the "view photos" button in the footer and then enable fill height on the site in the customizer by following these steps.

customize > content and design > layout tab > fill height > on

dfarmer

Thank you for the help! I did do that and I could only find that I could drop the button into the footer when on the "Entire Site" settings and I could not drop the button on the footer on just the homepage.

Could I drop the button into the "Entire Site" and then add CSS to make it so it only displays on the homepage?

Hikin' Mike

@dfarmer said:
Thank you for the help! I did do that and I could only find that I could drop the button into the footer when on the "Entire Site" settings and I could not drop the button on the footer on just the homepage.

Could I drop the button into the "Entire Site" and then add CSS to make it so it only displays on the homepage?

Just add this to your theme's CSS:

/*
* Displays Button Only on Home Page
****************************************/
.sm-page-home .sm-page-widget-button-container {
    display: block;
    }

.sm-page-widget-button-container {
    display: none;
    }

dfarmer

Thank you Mike! Worked like a charm!

dfarmer

I just noticed that the "View Photos" button does not stay anchored to the bottom of the page on mobile. Is there a way to tell it to anchor to the bottom on mobile as well?

Thanks again of the help!

Hikin' Mike

@dfarmer said:
I just noticed that the "View Photos" button does not stay anchored to the bottom of the page on mobile. Is there a way to tell it to anchor to the bottom on mobile as well?



Thanks again of the help!

Try this:

/**
* Pins Footer on Home Page for Mobile
************************************************/   
@media only screen and (max-width: 450px) {

    .sm-user-ui .sm-page-home .sm-page-footer-content,
    .sm-user-ui .sm-page-home .sm-page-layout-region-footer {
        position: fixed;    
        }

        .sm-user-ui .sm-page-home .sm-page-footer-content {
            bottom: 10px;
            width: 95%;
            }       

        .sm-user-ui .sm-page-home .sm-page-layout-region-footer {
            bottom: 35px;
            width: 100%;
            }

}           

dfarmer

Thanks again Mike, worked great!