Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 4
  • Views 801
  • Created
  • Last Reply
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 (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

Link to comment
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 (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.