/** The most important thing about the footer is it is stuck to the bottom of
* the screen even when the content is less than the height of the screen * * position - Needed to make the footer stick to the bottom * right, bottom, left - Set to 0 to not move the footer if the content is less * z-index - Set to place the footer behind the mobile-header-extended-background */
site-footer
position: absolute right: 0 bottom: 0 left: 0 width: 100% z-index: -1 /** As the name suggests, it separates the footer from the rest of the page * * margin - Set to auto to center the hr in the page */ #footer-demarcation max-width: 1012px width: 30% margin: auto border-top: 1px solid $color-light-grey /** Holds the footer navigation and fine print */ #footer-nav-container width: 50% margin: 30px auto 10px auto text-align: center /** Holds the the footer navigation */ #footer-nav-menu-icons-container width: 100% height: 50px /** The styles for the individual footer icon */ .footer-menu-icon display: inline-block width: 50px height: 50px margin: 0 5px 0 5px fill: $color-custom-secondary &:hover fill: $color-dark-grey /** Holds the fine print text */ #fine-print margin-top: 30px margin-bottom: 30px /** The styles for the fine print test */ .fint-print-text margin: auto font-size: 14px text-align: center
@media screen and (max-width: 768px)
#site-footer /** Changing the length of the separator with respect to the screen for * mobile devices */ #footer-demarcation width: 90% /** Changing the width of the footer's body */ #footer-nav-container width: 90%