If you want to have a footer shadow like this
Do the below guiding:
Add these codes to the Custom CSS box
Desktop Only
/* Desktop Only */
@media screen and (min-width:768px) {
footer.sections {
z-index: 999999 !important;
box-shadow: 9px 10px 33px #f1f;
}
}
Mobile Only
/* Mobile Only */
@media screen and (max-width:767px) {
footer.sections {
z-index: 999999 !important;
box-shadow: 9px 10px 33px #f1f;
}
}
Blog Page
/* Blog Page */
[class*="type-blog"] footer.sections {
z-index: 999999 !important;
box-shadow: 9px 10px 33px #f1f;
}
Event Page
/* Event */
[class*="type-event"] footer.sections {
z-index: 999999 !important;
box-shadow: 9px 10px 33px #f1f;
}
Product Page
/* Product Page */
[class*="type-products"] footer.sections {
z-index: 999999 !important;
box-shadow: 9px 10px 33px #f1f;
}
Cart Page
/* Cart Page */
body#cart footer.sections {
z-index: 999999 !important;
box-shadow: 9px 10px 33px #f1f;
}
Homepage Only
/* Homepage Only */
body.homepage footer.sections {
z-index: 999999 !important;
box-shadow: 9px 10px 33px #f1f;
}
Other pages – exclude homepage
/* Other pages - exclude homepage */
body:not(.homepage) footer.sections {
z-index: 999999 !important;
box-shadow: 9px 10px 33px #f1f;
}
One Page
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>