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

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!

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!

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

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

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

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;
}
}