Image/text mobile column reverse order

Solved

Image/text mobile column reverse order

Marcoares
Shopify Partner
2 0 1

Hi,

 

I need to get the image and text of a custom content section to automatically reverse order when on mobile.

 

I found some exemple of solutions already on this forum, but I'm not able to find the right selector to apply the code to.

 

Here's the link to the page :

 

https://abris-st-jerome.myshopify.com/pages/abri-industriel-hd-1

 

Pass : Abris2024!

 

Screenshot 2024-11-07 at 2.46.41 PM.pngScreenshot 2024-11-07 at 2.47.04 PM.png

 

Could someone help me please?

Accepted Solution (1)

Guleria
Shopify Partner
4181 812 1168

This is an accepted solution.

Hello @Marcoares ,

 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your main.css file and paste the following code at the bottom:

@media only screen and (max-width: 767px) {
.m-custom-content__block-text {
    order: 1;
}
}

 

 

If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

 

Thanks

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

View solution in original post

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
10211 2427 3081

Hi @Marcoares 

On which page can I find this section in your screenshot?

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Guleria
Shopify Partner
4181 812 1168

This is an accepted solution.

Hello @Marcoares ,

 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your main.css file and paste the following code at the bottom:

@media only screen and (max-width: 767px) {
.m-custom-content__block-text {
    order: 1;
}
}

 

 

If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

 

Thanks

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
Marcoares
Shopify Partner
2 0 1

It works !

Thank you so much !