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

Solved
CluelessA
Excursionist
17 0 6

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-har...

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.

Accepted Solution (1)

Accepted Solutions
Bluish
Shopify Partner
646 92 115

This is an accepted solution.

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

 

 

 

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

View solution in original post

Replies 4 (4)
Bluish
Shopify Partner
646 92 115

This is an accepted solution.

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

 

 

 

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

View solution in original post

CluelessA
Excursionist
17 0 6
Hi, thank you, sadly it did not work, I get exactly the same result, seems
to have no effect
Bluish
Shopify Partner
646 92 115

Hi @CluelessA 

I made updates to the code, please check and repaste

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

CluelessA
Excursionist
17 0 6

@Bluish YOU DID IT!!!!!!!

Fixed them all in one sweep! @_@@

Thank you so so so so much!!!