Footer Shadow

If you want to have a footer shadow like this

footer-shadow-01

Do the below guiding:

Add these codes to the Custom CSS box

In this post

Desktop Only

/* Desktop Only */
@media screen and (min-width:768px) {
footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}
}

/* Mobile Only */
@media screen and (max-width:767px) {
footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}
}

/* Blog Page */
[class*="type-blog"] footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}

/* Event */
[class*="type-event"] footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}

/* Product Page */
[class*="type-products"] footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}

/* Cart Page */
body#cart footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}

/* Homepage Only */
body.homepage footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}

/* Other pages - exclude homepage */
body:not(.homepage) footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}

Add this code to the Individual Page Header Code Injection (If your plan is Personal, you can add code to Code Block)

<!-- Footer Shadow - One Page -->
<style>
footer.sections {
    z-index: 999999 !important;
    box-shadow: 9px 10px 33px #f1f;
}
</style>