Tagged: alternating content, column order
-
AuthorPosts
-
August 10, 2020 at 7:13 pm #1236480
Hello!
I read multiple posts about how to do this including https://kriesi.at/support/topic/possible-to-change-column-order-on-mobile/ – but still am having trouble getting it to work! Wanted to see if you might have any ideas?It shows up fine on desktop: https://www.dropbox.com/s/t3kel9ridxxm1is/desktop.PNG?dl=0
But it then does Picture – Text – Text – Picture on mobile. Ideally it would be Picture Text Picture Text.
Mobile: https://www.dropbox.com/s/kcybkq4l1g7r9sj/mobile.PNG?dl=0I added the following to the Quick CSS section
.responsive #top .flex_column_table .reversecolumns {
display: flex;
flex-direction: column-reverse;
flex-wrap: nowrap;
}
See https://www.dropbox.com/s/l9ork67jsmidsuw/custom_css.PNG?dl=0 for a picture of how I put this in Quick CSSI added “reversecolumns” to the custom CSS for the first column. I put the row in a color section, because it seemed like a few of the posts mentioned this, but I’m not sure if that was necessary.
https://www.dropbox.com/s/4hu19nf8minx2mi/edit_column_css_1.PNG?dl=0
https://www.dropbox.com/s/c5mgo157kr8zgmc/edit_column_css.gif?dl=0Any ideas? Once we figure it out on this page, ideally we’ll use the same solution for a few other places on the website.
Thanks!
Stephen- This topic was modified 4 years, 3 months ago by orangecommune.
August 12, 2020 at 4:03 pm #1237028Hey orangecommune,
I do not see the class “reversecolumns” added there.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { .responsive #top.page-id-803 #av_section_2 .entry-content-wrapper { display: flex; flex-direction: column-reverse; } #top.page-id-803 #after_section_1 .content { padding: 0; } }
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.