How to get Text columns with images to show side by side on mobile

[SpotOnDealz]

Hi,

I am using a theme called turbo and one of the sections called Text columns with images. On mobile, it shows the columns stack on top of each other, i would very much love to see them side by side (2 max).

what do i need to do to achieve this?

I have noticed similar topics on different posts, and they were solved with code, however those codes are specific to their cases.

My url is: https://www.spotondealz.com.hk/en

[Dan-From-Ryviu]

Hi @SpotOnDealz

Please show me URL contains that section so I can check and provide the code

[ThePrimeWeb]

Hey @SpotOnDealz ,

Which section do you have in mind, can you provide a screenshot?

[SpotOnDealz]

Text columns and image. I imagine i may need to insert code into the custom css

[ThePrimeWeb]

Yes you might, which page is this?

[SpotOnDealz]

https://www.spotondealz.com.hk/pages/ivybears-supplement

This is an earlier version, but the section is exactly the same

[ThePrimeWeb]

Hey @SpotOnDealz ,
Because you’ve added 2 sections with 3 blocks, I cannot make all 6 of them side by side, it’ll be
1 2
3
4 5
6

If you want the
1 2
3 4
5 6

layout then please add them all in one “Text columns with images” section.


[Dan-From-Ryviu]

Please add this code to Custom CSS of that section

@media (max-width: 749px) {
.image-element__wrap {
    width: calc(100% - 200px);
}
}

[SpotOnDealz]

i tried this but does not work

[SpotOnDealz]

Thats true, i tried to make it all together and the reason i cant it because this section only allows up to 5 columns and i have 6 products. I may need to rebuild it using a different section

[Dan-From-Ryviu]

Please try to update code to this and check

@media (max-width: 749px) {
.image-element__wrap {
    width: calc(100% - 200px) !important;
    float: left;
}
}

[SpotOnDealz]

no change

[SpotOnDealz]

is it possible to try it as

1 2
3
4 5
6

Because otherwise, its currently not feasible for me to create something similar using a different section, they all end up with at least one element in the wrong place.

[Dan-From-Ryviu]

Please try to add this code to your theme.liquid file after , save file, and reload your page and check again

[Dan-From-Ryviu]

Ahh, you did not click Save button so the code will not be applied

[SpotOnDealz]

I am not 100% certain but i would not need to save it to see the change, when i use css to change the font colour it will change whether i saved or not. I even added the code after the head section in the theme file and its not working

[Dan-From-Ryviu]

Its working now as I’m checking on your page

[SpotOnDealz]

Apologies if i was not clear on how i wanted it to look.

I had hoped the product images, text and columns would be side by side, 2 on each row, this has changed it to product left and text right.

[Dan-From-Ryviu]

Ahh, I see you have 2 sections, please update the code in theme.liquid file

[Dan-From-Ryviu]

Go it; please update the code you added to the theme.liquid file to this