Venture: how to stop custom "columns with text" from collpapsing on mobile version

Store Design
1

Hi guys, here I am again going insane. I hope is one of the last things I have to fix.

Sample product: https://www.abysm-internal.com/products/aesthetic-tote-bag-with-vaporwave-and-psychedelic-daruma-harajuku-bag

Below the customer reviews part I made two custom sections of columns with text so I could add those photos.

I’m happy with how they look on Desktop, but on mobile they collapse into a single ugly column.

Please, how do I make them either stay as they look on desktop, OR even better and if not complicated, arrange them in 3 per row?

I appreciate the help so much, I have 0 budget to hire anyone to help right now.

To spammers: PLEASE don’t send me messages through my website offering your external and unrelated services, I won’t respond, you are just wasting your time.

2

Hey,

Try the below code, paste it at the bottom of your theme.scss file. If you want to change column from 3 to 2, change 33.33% to 50%

@media only screen and (max-width: 749px) {
  .template-product .column-flex {
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .template-product .column-flex .flex__item {
    flex: 1 1 33.33%;
  }
}
1 Like
3

Hi, thank you, sadly it did not work, I get exactly the same result, seems
to have no effect :disappointed_face:

4

Hi @CluelessA

I made updates to the code, please check and repaste

5

@JohnFromJotting YOU DID IT!!!

Fixed them all in one sweep! @_[email removed]@

Thank you so so so so much!!!

1 Like