Events Page Mobile Design Issue

Site URL: https://www.doit4wfoundation.com

Hi all-

I launched my website today and ran into an issue on mobile. I noticed when I go into individual events pages, the arrows that display at the bottom of the page (to navigate to other events) are overlapped and look bad. it also extends the width of the page making it uncentered and just doesn’t look clean. I either want to remove the navigation arrows section completely or just remove the event titles or make them smaller.

Does anyone know a code or formatting to correct this issue? I need my event page and don’t want it to look bad on mobile.

thanks!

Add to Design > Custom CSS. The code runs on both Event, Blog, Portfolio (I think they will have same problem)

/* Pagination title */
@media screen and (max-width:767px) {
h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}
}