Insert a text block into an Events Calendar Page (Om Template)

Site URL: https://grouse-capybera-9azb.squarespace.com

Because the Events Calendar page does not support regular, repeating events without manually inserting the repeated events every week I thought I would insert a block above the Calendar Listings which could state weekly events.

However the Events Calendar page does not allow insertion of text blocks above the Calendar Listings.

So I thought of a workaround - use the Banner function to exhibit the Page Title and Page Description Text which will serve as a text block. So I inserted a Blue background into the banner and formatted the text. This works fine, but because the Banner background is a graphic it does not reflow when looking at the site on a mobile and so the Page Description text disappears.

Any thoughts? I am a CSS newbie – thanks in advance for your help! Password Turner1754

Add to Design > Custom CSS > Then save & reload your site

/* Calendar banner on mobile */
@media screen and (max-width:767px) {
#hero .wrapper {
    background-color: #4d94c2;
    margin-top: 0 !important;
}
div#hero .page-description {
    display: block !important;
}
div#hero {
    min-height: 350px;
}
}