Jump to content

Poster Images Adjust from 4/row to 2/row on Tablet

Recommended Posts

Posted

Site URL: https://www.ancientcedarsreiki.ca/

Hi Everyone,

The very helpful @tuanphan showed me that the 4 poster images on both my homepage and about page look fine on a computer or mobile screen, but on a tablet the text gets cut off (screenshots attached). I've done a ton of searching on the forum and haven't been able to find any CSS that works for me. I want the 4 images/row to adjust to 2 images/row in tablet view. Is there anyone who can help me?

Thank you so much!

Desktop View.png

Tablet View.png

  • Replies 4
  • Views 833
  • Created
  • Last Reply
Posted
On 3/18/2021 at 3:45 AM, leighb said:

Site URL: https://www.ancientcedarsreiki.ca/

Hi Everyone,

The very helpful @tuanphan showed me that the 4 poster images on both my homepage and about page look fine on a computer or mobile screen, but on a tablet the text gets cut off (screenshots attached). I've done a ton of searching on the forum and haven't been able to find any CSS that works for me. I want the 4 images/row to adjust to 2 images/row in tablet view. Is there anyone who can help me?

Thank you so much!

Desktop View.png

Tablet View.png

You split the 4 images in col-9 and col-3, is there a reason for this? it make the need of 2 columns on tablet not possible

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted

Hi @bangank36, thanks for your reply.

I'm not sure I understand what you mean by col-9 and col-3. I used 4 separate poster images placed side by side in 1 row (4 columns). Each image is a link to a specific page (different ways for clients to work with me). I attached a couple screenshots in my post. The first attachment shows how it appears on a computer (looks good, all the text fits in the images). The second attachment shows how it appears on a tablet (not good, text is cut off and doesn't fit in the images). I was hoping that in tablet view the images could be in 2 rows each with 2 images in each row (2 rows with 2 columns). Is there CSS that can help with this? 

Thanks again, I appreciate the support and any knowledge you have to share.

Leigh

Posted
2 hours ago, leighb said:

Hi @bangank36, thanks for your reply.

I'm not sure I understand what you mean by col-9 and col-3. I used 4 separate poster images placed side by side in 1 row (4 columns). Each image is a link to a specific page (different ways for clients to work with me). I attached a couple screenshots in my post. The first attachment shows how it appears on a computer (looks good, all the text fits in the images). The second attachment shows how it appears on a tablet (not good, text is cut off and doesn't fit in the images). I was hoping that in tablet view the images could be in 2 rows each with 2 images in each row (2 rows with 2 columns). Is there CSS that can help with this? 

Thanks again, I appreciate the support and any knowledge you have to share.

Leigh

I checked the inspection, they are split into 2 columns

image.thumb.png.9d807efcfb7a2cf33aed7f070b1cbaa7.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted

Thank you to @tuanphan who provided an alternate solution with this CSS:

// Fix tablet posters home page//
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-60368a623300c10aef1d184e .image-inset {
    padding-bottom: 200% !important;
}
}

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.