Help with aligning button to bottom on screen

bmetaylor

I have been struggling to figure out how to align the button on my homepage with the bottom on the screen on both mobile and standard monitors. I tried using some CSS that I found but it wasn't working for me. Any help would be really appreciated.

bill-taylor.smugmug.com

Thank you as always!

Hikin' Mike

Add this to a CSS Block on your home page:

/* Puts the button on the bottom */
.sm-page-widget-button.sm-page-widget-32910253 {
  position: fixed;
  bottom: 0;
  width: 100%;
}

bmetaylor

Thanks, Mike. It moved it to the bottom, but not centered like it was on top. Also, the rest of the footer on mobile is now on top? Is there a way to fix that and center the button? Also, for some reason, it seemed to blow away the hamburger code menu you helped me with a while back. I dug up the code, but can't figure out how to make the height of the top menu smaller to fit my site name and hamburger menu without a huge gap.

Here is my css...

/* Puts the button on the bottom */
.sm-page-widget-button.sm-page-widget-32910253 {
position: fixed;
bottom: 0;
width: 100%;
}

/**

• Hamburger Menu for Mobile Devices
• Centers Logo, Menu to the Left
  ****************************************************************/
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
  text-align: left;
  }

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
visibility: hidden;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
font-family: 'SmugMug Icon Font Regular';
font-size: 48px;
width: 48px;
line-height: 24px;
content: '\E039 ';
display: block;
visibility: visible;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background: none;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
position: absolute;
top: -60px;/* adjust for your logo */
right: 10px;
z-index: 1;
}

.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {
float: none;
}

.sm-user-ui .sm-page-widget-logo-text-container {
margin: 10px 0;
}

@media (max-width: 736px) {

.sm-user-ui .sm-page-widget-28161879 .sm-page-widget-content {padding: 0 !important;}

}

Thank you...

Hikin' Mike

@bmetaylor said:
Thanks, Mike. It moved it to the bottom, but not centered like it was on top.

Looks like your button is between SmugMug's Footer Nav and their Copyright blocks. You need to move your button on it's own row. That should center it.

bmetaylor

I appreciate your patience with me... Still running into some issues.

Here's where I'm at....
Desktop - You mentioned moving the button to a new row. Is that done within the code or within the homepage editing tools? Im having trouble figuring out how to do it
Mobile - I'm running into two issues. 1) The footer appears near the top of the screen instead of the bottom 2) The header area (which is grey) is far too tall for the text in the header and leaves a huge gap.

Any guidance would be appreciated.
Thank you
bill-taylor.smugmug.com

Hikin' Mike

@bmetaylor said:
Desktop - You mentioned moving the button to a new row. Is that done within the code or within the homepage editing tools? Im having trouble figuring out how to do it

Yes, in the Customize section. You just need to move it to a new row. If you can't figure out how, I can't help, so you need to contact the Help Desk and they should be able to do that.