Help showing two columns on mobile for the "Text columns with images" section - IMPULSE THEME

Store Design
,
1

I’ve been struggling with this for a few days …managed to show 6 columns on desktop by editing the text-columns.liquid, but on mobile I just can’t make it work.

My best shot at it was changing the .grid__ item width to 50% in theme.liquid but then it messed up other sections around the website too, so I reverted it to 100%.

Hopefully you can help me, the website is importbike.mx

2

Hi @jcsaucedo

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 

{% if template.name == 'index' %}

{% endif %}

This code will affect only on homepage and this is the result

PageFlyVictor_0-1680050705653.png
PageFlyVictor_0-1680050705653.png390×844 113 KB

Hope this can help you solve the issue

Best regards,

Victor | PageFly

1 Like
3

Hello @jcsaucedo ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1680052387876.png
GemPages_0-1680052387876.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

4

Hey! Thank you for the suggestion. It didn’t work, it had a sort of delay when displaying the products, like a lazy loading thing. But I did use a line of code from your suggestion and merged it with the other suggestion from GemPages and it is now showing as it is supposed to, the final code I used was:

@media screen and (max-width: 767px){ #shopify-section-template--18458975633708__171d5d86-e036-4f11-a957-156e5d5aa807 .grid--flush-bottom>.grid__item { width: 50%; } } @media screen and (max-width: 767px){ #shopify-section-template--18458975633708__16cc8717-9d1a-4dde-a34e-68e18db72c74 .grid--flush-bottom>.grid__item { width: 50%; } }
5

Hey! Thank you for the suggestion. It didn’t work since it also messed with the desktop version and it only made the change on one of the two sections I need it to. But I did use some lines of the code from your suggestion and merged it with the other suggestion from Pagefly-VIctor and it is now showing as it is supposed to, the final code I used was:

@media screen and (max-width: 767px){ #shopify-section-template--18458975633708__171d5d86-e036-4f11-a957-156e5d5aa807 .grid--flush-bottom>.grid__item { width: 50%; } } @media screen and (max-width: 767px){ #shopify-section-template--18458975633708__16cc8717-9d1a-4dde-a34e-68e18db72c74 .grid--flush-bottom>.grid__item { width: 50%; } }
6

Let me know if you need further assistance!
Thank you