-
Posts
-
Hi! This is an issue we’ve had on the pages we’ve worked on and it’s bugged us for a while. We frequently alternate the content on the page with text on one side and the image on the other, in side by side columns. This is great for desktop, but it doesn’t translate well to mobile. Is and would it be possible to force the images that are on the right to be above the text content when on mobile? We can create mobile only elements and hide the others on desktop, but this is not only inefficient but also makes maintenance a nightmare.
Desktop:
Mobile
This is possible in other themes such as Flatsome, where you can ‘Force first position’ on mobile/tablet:
Hey chiligroupharstad,
Could you post a link to the page in question so that we can have a closer look please?
Best regards,
RikardThis particular post is on a staging site before we launch a redesign of the site, however here is a similar example. Scroll down to ‘Om Trollfjord Bredbånd’. On mobile you can see that we’ve chosen on this page to disable one of the images on mobile in an effort to minimise scrolling, but that’s not ideal. Neither is a copy of the content that is arranged differently that only shows on mobile while hiding the desktop version on mobile – That’s a nightmare for maintenance, while adding to the page size and complexity.
What would be ideal is having the option to force a column to first on mobile, like in the Flatsome screenshot in my previous reply.
Hi,
You can reverse the order of the columns with css flex.
.responsive #top .flex_column_table { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; }You may need to apply a custom css class attribute to the columns where you want to apply it.
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Best regards,
IsmaelIsmael, I’m wondering if you can help me with a similar situation.
On my site, I’m trying reverse two columns on a page on the mobile version of the site. On the desktop, the order is correct, but on the mobile version the client wants the left column below the right column.
I put the flex CSS code in the Quick CSS section of the General Styling, naming it “.responsive #top .flex_column_table .labelerColumn1”
https://www.dropbox.com/s/4cjutehoi8ougub/screen-one.png?dl=0I added the custom name (.labelerColumn1) to the left column on the page.
https://www.dropbox.com/s/muz9r3qb67d9kgh/screen-two.png?dl=0Am I missing something else? I’m assuming a media query? But the order didn’t change just by adding the code.
I’m not a strong backend developer, so this is alien to me. I appreciate any help!
Best,
KevinDon’t put the fullstop/period in the ‘Custom CSS class’ field when you’re writing it in there, that’s just for when you’re targetting a class afterwards.
Hi,
Did you set the column to have an equal height? The modification doesn’t work because you’re trying to apply the css to the columns inside the flex_column_table element. You have to apply it directly to the flex_column_table element.
Or try to use this css code instead.
.page-id-1806 .post-entry-1806 .entry-content-wrapper.clearfix { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; }Best regards,
IsmaelOkay I took off the period (that was an oversight) and it actually changed the order of only the left column. I just saw Ismael’s post. I’ll try that.
I REALLY appreciate the help!
Best,
KevinHello! I’m having issues as I try to use this approach on my website – 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!
StephenHi Stephen,
Thanks for the screenshots. The link you posted leads to a 404 page though, could you check the URL please? If we need to be logged in to be able to view it then please post login details in private.
Best regards,
RikardSo sorry about that!
I’ve included the updated URL in the private section –Thank you in advance for your help!
Stephen
- You must be logged in to reply to this topic.