Customizing layout of section elements for mobile version

Solved
Highlighted
New Member
3 0 0

Hi,

I am using a Debut theme and have encountered the following issue.

My website carousel banner section is followed by Image with Text section. 
Now, the Image with Text section appears as text followed by image on desktop view (left side is text, right side is image) but in mobile view, this section appears as image followed by text.

How do I go about modifying the code so that even on mobile, text comes before image? It's a bit weird having 2 images one below another on mobile view.

0 Likes
Highlighted
Tourist
6 0 1

In your theme's css file you can set up a media query for mobile and add order: 1, etc for the relevant div tags. 

 

Don't know how familiar you're with css code, I can give a better answer if you include a url to the store. 

0 Likes
Highlighted
New Member
3 0 0

thank you for the tip @wtmedia
I am not super familiar with the code. Would you be able to share the exact snippet that would allow for the ranking of divs, since I don't see any div order ranking being mentioned in my css code currently?
here's the link to the store http://bit.ly/2pZ4mhE

0 Likes
Highlighted

Success.

Astronaut
1126 150 295

Try this in the very bottom of your theme.scss.liquid file in your assets folder:

 

@media (max-width:750px){
.feature-row__item.feature-row__text {
    order: 0;
}
.feature-row__item {
    order: 1;
}
}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
New Member
3 0 0

Thank you for the help @Ninthony , that worked!

0 Likes