How to show 3 images in a row on PC but 2 images on mobile.

[Minako85]

Hi.

I'm having trouble adjusting certain section on our theme.

Theme: Impulse

Section name: Text columns with images

Right now, 3 images are shown in a row on PC and 1 image on mobile.

We want to adjust it so that we can show 2 images in a row on mobile.

https://store.aman.ne.jp/blogs/aman_feature_women/mother-s-day-gift-idea

Any help will be greatly appreciated!

[BSSCommerce-HDL]

Hi @Minako85, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
@media only screen and (max-width: 768px) {
  #shopify-section-template--18005167243490__text_columns_rRkhgm .grid {
    display: flex;
    flex-wrap: wrap;
  }
  #shopify-section-template--18005167243490__text_columns_rRkhgm .grid__item {
        width: calc(100% / 2) !important;
  }
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Minako85]

Thank you so much!

I noticed that this code only works on this template.

Can you kindly advise where to change so that it applies on another template as well?

[BSSCommerce-HDL]

Hi @Minako85, Can you kindly share the details of your problem (link page) with us? We will check it and suggest you a solution if possible.

[Minako85]

Hi @BSSCommerce-HDL  Thank you for your prompt reply!

There's a template I'm editing right now that is still unpublished. As you can see, the code is not working.

[BSSCommerce-HDL]

@Minako85, Can you share preview link with me?

[Minako85]

@BSSCommerce-HDL 　Here below is the link

https://qs0oui0rb06zmkyt-63938035938.shopifypreview.com/blogs/aman_feature_women/articles?preview_ke...