image in description responsive mobile

[jsngn]

Hello 

I want to make my description with image to be mobile responsive

Currently, in desktop, I make a table with 2 column image

in mobile, it is also have 2 column, but very small image, can not see clearly so i want to ask how can I make in mobile just 1 picture in 1 row

[LuffyOnePiece]

Hi @jsngn ,

Can you please send me preview URL of the store?

Thank you

[jsngn]

Hi @LuffyOnePiece ,

Thanks for your help

This is my preview URL: https://r2eb9vtpinywnsla-88351637811.shopifypreview.com/products_preview?preview_key=667b0cb4c413762...

[BSSCommerce-B2B]

Hi @jsngn 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file css-site.css. Search for the following CSS snippet

.rte table {
    table-layout: fixed;
}

Please change it to

@media screen and (max-width: 750px) {
.rte table tr td {
    width: 100% !important;
}
}
@media screen and (min-width: 750px) {
.rte table {
    table-layout: fixed;
}
}

Result

If it helps you, please like and mark it as the solution.

Best Regards

[jsngn]

Thanks, in mobile it helps. But in desktop it turns out that only image, the column with 2 images dissapears 😞

[BSSCommerce-B2B]

I have updated the code above. Have you tried the new code? There is an issue on the desktop. Could you explain the problem in more detail and provide some images?

[jsngn]

Oh great, thanks. it works now, but on mobile it only show up the 1st and 2nd image. the 3rd and 4th disappear.

[BSSCommerce-B2B]

I understand. Please make a slight modification to the CSS in the css-site.css file

@media screen and (max-width: 750px) {
.rte table tr td {
    width: 100% !important;
    display: block !important;
    height: 100% !important;
}
}
@media screen and (min-width: 750px) {
.rte table {
    table-layout: fixed;
}
}

Don't forget to like and mark it as the solution if this helps you. Regards.

[jsngn]

Thanks. but now there is a gap, the 2nd, 3rd image disappear 😞

[BSSCommerce-B2B]

Hi @jsngn 

I'm not experiencing the same issue on my computer, which is quite strange. I have recorded a video for you to watch. How can I replicate the issue you're encountering?
https://www.loom.com/share/b398f3ec3b364d82aa0ec0b9c4faddc9

[jsngn]

Hi @BSSCommerce-B2B 

In your video, you test in mobile dimension samsung galaxy, it works

I also try in my android samsung phone, it works

but in my 2 other mobile apple iphone, it still like this

So I guess it happens because android and ios are differents

https://drive.google.com/file/d/1GEFS1g93kPm8DvgjoiTb28xjuBkEz_Zk/view?usp=sharing

[BSSCommerce-B2B]

Thank you for explaining your reasoning. I will check this issue and respond as soon as possible. Have a nice day

[jsngn]

thank you very much for your help

have a nice day too!!

[BSSCommerce-B2B]

I checked again on the Safari browser and found that the issue is indeed caused by display: block !important, which only works well on Android. I tried changing it to display: contents !important and it worked well on both Android and iOS. The revised section will look like this:

@media screen and (max-width: 750px) {
.rte table tr td {
    width: 100% !important;
    display: contents !important
    height: 100% !important;
}
}
@media screen and (min-width: 750px) {
.rte table {
    table-layout: fixed;
}
}

Try this and I hope the issue will truly disappear =)))

[jsngn]

haha thanks a lot for your help

But now both android and ios it show 1st and 3rd image, the 2nd and 4th is disappear 😭

[BSSCommerce-B2B]

Hi @jsngn 

It's strange. I've seen it working on mobile in Safari before. Something terrible must have happened. I'll check again and get back to you. I'm terribly sorry for the inconvenience.

[jsngn]

Thank you very much for your help!