Making Image Second On Mobile For "Image With Text" Vision team

Sasha84 · ‎01-11-2024

Hi, I want to make image second on mobile for just one "Image With Text" component. I dont want to change order for all"Image With Text" components. Can anyone help with this?

Here is the preview link:
https://t02dwt1nqil3k4c3-82635784493.shopifypreview.com
Section is bellow image withe the dog on the snow:

niraj_patel · ‎01-11-2024

Hello @Sasha84

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

@media screen and (max-width:749px){

.image-with-text.column-spacing--medium {
display: flex;
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}

}

</style>

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Dan-From-Ryviu · ‎01-11-2024

Please drop your page URL and let me know Image with text section you want to change order

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

JosieatNouvelle · ‎07-01-2024

Hey! Am wondering if you can help me with the same issue?
www.nouvelleglass.com
The images currently come before text on mobile.
I would like to swap this please, so text comes before images on mobile.

Dan-From-Ryviu · ‎07-01-2024

Hi @Sasha84

Please add this code to Custom CSS of that section in your Online Store > Themes > Customize

@media (max-width: 768px) {
    .feature-row__text { order: 0 !important; padding-bottom: 20px !important; }
}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

JosieatNouvelle · ‎07-02-2024

Amazing Thank You so much!!

Dan-From-Ryviu · ‎07-02-2024

You are very welcome!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

niraj_patel · ‎01-11-2024

Hello @Sasha84
Can you share page URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Danishshopdev · ‎01-11-2024

Hello @Sasha84 ,

Please share store url

banned

Sasha84 · ‎01-11-2024

Hi, here is the preview link:
https://t02dwt1nqil3k4c3-82635784493.shopifypreview.com
Section is bellow image withe the dog on the snow:

Dan-From-Ryviu · ‎01-11-2024

Go to Online store > Themes > Edit code > open theme.liquid file, add this code under <head> element

<style>
@media (max-width: 749px) {
#shopify-section-template--21063472283949__image_with_text_8PKNmB .image-with-text--image {
order: 2;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

niraj_patel · ‎01-11-2024

Hello @Sasha84

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

@media screen and (max-width:749px){

.image-with-text.column-spacing--medium {
display: flex;
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}

}

</style>

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Sasha84 · ‎01-11-2024

Thx a lot!!! It worked perfectly!:)