Issue with grid of image poster blocks not viewing properly on a tablet

Site URL: https://sheep-smilodon-x2a6.squarespace.com

The site I’m working on is not published yet but the password is: now2021

I’ve been checking on how the site views in mobile on my desktop as I build it and its been all good. However, I happened to view it on my iPad and noticed that there’s a problem with how one section on the main page views in tablet size.

There is a grid that I set up of 6 poster image blocks with text on top of each image (2 rows of 3 rectangles). On my iPad, the text runs off of the image and the entire section looks like a mess. I think this could be remedied if the image boxes just stack one on top of the other (like it does on the mobile view). Right now, its trying to keep the 2 rows of 3 in tablet view. When I google this, I see its a pretty common problem. I copied and pasted some CSS from the forum dealing with similar problems but nothing has worked for me. I guess the code is not specific enough to my problem. I don’t know enough about code to create what I need to solve the  problem but it seems to me it should be pretty simple.

The screen shots show what it looks like on tablet vs on desktop.

Any suggestions would be greatly appreciated.

Have you considered going with straight text blocks and CSS to achieve a similar effect?

Going with text blocks would require some amount of CSS to get the borders, background colors, spacing, etc.. On the upside they should adapt better to a wider range of screen sizes. Here are some screen shots. The first your issue displayed on my screen here. The second a mock up I threw together to show some of the basic concepts of the text block only version. Notice how at the exact same screen size, the text blocks only version is fairing better.

Creedon, Thanks so much for taking the time to take a look at my problem and for the suggestion. I dug a little deeper on this forum and saw that same suggestion was made in a few other instances. I guess that would solve the problem but it would compromise my design with the textured paper boxes, not to mention that I don't have a clue how I'd set up the css for an alternative background. Since the problem is only in that particular section and only in tablet view, my thought was that by forcing it to always stack the boxes on any mobile device, the problem would be solved. Now I'm thinking maybe I should rethink the layout.

Forced stacking earlier than normal. I hadn't considered that. Something to think about.

On my suggestion. You wouldn't necessarily have to give up your backgrounds. If it is a repeating pattern we can try to get the smallest unit of it and then apply that as a background image.

If you are interested in experimenting with other techniques the nice thing is you can set up a page in the unlinked section  and work out issues there.

As to not knowing the CSS needed, I'm sure we can at least help you explore what CSS would be needed to get an effect started.

I think this is as about as good as you can get with forcing stacking.

Add the following to Design > Custom CSS.

/* force stacking earlier than normal for six image block page section */

@media screen and ( min-width: 768px ) and ( max-width : 840px ) {

  [data-section-id="6010bbb5af3a5428e7094302"] .sqs-layout [class*=sqs-col] {
  
    float : none !important;
    margin-left : auto;
    margin-right : auto;
    width : 75% !important;

    }
  }

Let us know how that looks to you.

Awesome! The code for forced stacking worked great! Thanks so much!