Navigation buttons at the bottom of folio overlap on mobile site

Site URL: https://jonaswilsonmedia.com/my-work/landscape

Hey, new Squarespace user here. I've recently published my photography portfolio site but have since noticed some issues with the design when viewing on mobile. I';m very happy with the layout on the desktop site, however when accessing certain sections of the folio, there are buttons at the bottom to switch between 2 sections which overlap and are impossible to read properly, (see image attached). These buttons were automatically there and I did not add them myself, I was just wondering if there was a way to replace the text with simply arrows, or perhaps have one line of text positioned higher or lower on the page to avoid overlap.

If anyone has any tips I would greatly appreciate it!

Add to Design > Custom CSS

/* portfolio pagination */
@media screen and (max-width:767px) {
section.item-pagination[data-collection-type^="portfolio"] h2 {
    display: none;
}
}

I need help with this too! I tried this CSS code and now my navigation just straight isn't showing up. 

13 hours ago, AdriaAdams said:

I need help with this too! I tried this CSS code and now my navigation just straight isn't showing up. 

Yes. It removed titles, show arrow only

You can share link to your site, we can give code to resize text

@tuanphan Thank you! It's https://www.adriaadamsco.com/portfolio/pleasedonthateme

On 4/27/2022 at 1:45 AM, AdriaAdams said:

@tuanphan Thank you! It's https://www.adriaadamsco.com/portfolio/pleasedonthateme

Remove above code & add this new code

/* Portfolio pagination title mobile */
@media screen and (max-width:767px) {
section.item-pagination[data-collection-type^="portfolio"] h2 {
    font-size: 14px;
}
}