Wanderdoll

@tuanphanJust add these two to code blocks? Nothing to put into Code Injection or Custom CSS?

Found a solution: @media screen and (max-width:640px) {.transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 0; } }

@tuanphan, I tried this out on mine as well and it was super helpful. However, I was curious, how would you target the secondary text here and not just the header on the banner?

https://oval-buffalo-n69g.squarespace.com/our-team

Similar issue where the banner image is getting cut off. I've tried the previously mentioned code <style> @media screen and (max-width:640px) { .banner-thumbnail-wrapper img { width: 100% !important; height: auto !important; left: 0 !important; } } </style> Which did resize it but created this black bar underneath (see screenshot) I've since removed that code since I didn't want the black bar, but if you have one that resizes on mobile without creating that black bar please let me know!

Nevermind, ended up finding it! Here's the code that worked for anyone seeing this: @media only screen and (max-width: 420px) { .image-block .design-layout-poster .image-inset { padding-bottom: 100% !important; }}

The text on the poster expands beyond my image. How would I remove the image on mobile sites if the text is too large for it?