Solved

Trying to change order of image with text on mobile.

KGBeastXxX
Tourist
4 0 3

I am trying to adjust the order for which an image with text section appears on mobile. I have tried editing the css but am not having any luck.

 

It currently shows:

Heading

Subheading

Image

 

and I would like to change the order for this area to

Image

Heading

Subheading.

 

Please help if possible. I added the following code in the theme.css file at the end of the image with text section but am still having issues.

image.png

Thank you.

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@KGBeastXxX 

great thanks for details please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 767px) {
.homepage-featured-content-wrapper, .homepage-map-wrapper {display: flex;flex-wrap: wrap;}
.feature-row--no-overlapping .feature_row__image_wrapper {order: 2;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 7 (7)

DigiXoft
Shopify Partner
109 18 72

Hi,

A very good question, please share your store URL so I can answer according to your theme

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on arslan@digixoft.com regarding any help
Shopify Partner | Skype : arslan.saleem261
KGBeastXxX
Tourist
4 0 3

Hello,

Below is the site url, thank you!

https://waxonewax.com/

 

Thank you,

DigiXoft
Shopify Partner
109 18 72

You can add this

.feature-row--no-overlapping .homepage-featured-content-wrapper {
flex-direction: row-reverse;
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on arslan@digixoft.com regarding any help
Shopify Partner | Skype : arslan.saleem261
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@KGBeastXxX 

great thanks for details please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 767px) {
.homepage-featured-content-wrapper, .homepage-map-wrapper {display: flex;flex-wrap: wrap;}
.feature-row--no-overlapping .feature_row__image_wrapper {order: 2;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KGBeastXxX
Tourist
4 0 3

Thank you very much Ketan, it works great!

KetanKumar
Shopify Partner
36839 3635 11972

@KGBeastXxX 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

KetanKumar
Shopify Partner
36839 3635 11972

@KGBeastXxX 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing