Jump to content

Title and subtitle overflowing beyond poster image block on ipad

Recommended Posts

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


I have a series of 7 poster image blocks with a title and subtitle. My image is a simple colored square so the focus is on the text. The problem is that when the website resizes to ipad width, the text overflows way beyond the image block. It looks all jumbled and impossible to read.

Can this be fixed? 

Seems odd that the image blocks dont hold the ratio as they resize.

I didnt want to use text blocks with a background and border because I want the blocks to be square (and stay square) and the text blocks will resize to whatever ratio, depending on the device the page is viewed on.

See below for the before and after.before.thumb.png.f22b4e669b8772e81cba6e562cf5e161.pngafter.thumb.png.dfb1554f9271fecb8a06bf42681a4f36.png

If anyone has a solution, I would appreciate it! The password to the site is tmv1234



Link to comment

Try adding this to Design > Custom CSS > then save & reload the site

@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-62f17038e3e2a5720d4e644e .image-block .image-inset .content-fill.sqs-image-shape-container-element {
    padding-bottom: 200% !important;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.