You can achieve this by applying following CSS code.

@media(max-width:320px) {
   
.headerslider {
    visibility: hidden !important ;
}

.wrapper.section {
    margin-top: -460px !important;
}

}

@media(max-width:480px) {
   
.headerslider {
    visibility: hidden !important;
}

.wrapper.section {
    margin-top: -460px !important;
}

}

Hope this will help.
Thanks.

Is there a way to adjust the CSS to fix this?

Thanks!
Jen

You can achieve this by applying following CSS code.

@media (max-width: 500px)

.wrapper .section-inner {
    max-width: 100%;
    margin-top: 70px !important;
}

Hope this will help.
Thanks.

Is there any way to apply this same logic to a single post page? It works perfectly when visiting my home page, but when I click on an individual post (for example https://redwhitedenim.com/jewels-for-hope/) the white space where the header slider was is still showing in mobile view. Is there any way to delete this white space?