-
Posts
-
Hello,
I was wondering if it is possible to arrange column order in a different way from the desktop version. Let me try to explain this better.
In my website I have 5 different colour sections divided into 2 column each, in the column I put text and image using this scheme:
– Image left and text right
– text left and image right
– and so on…When the page is rendered in the mobile version of course whatever is on the left goes on top and whatever is on the right goes to the bottom, therefore, the layout appears in column like this:
– Image top – text bottom
– text top – image bottom
– and so on…I would like in the mobile version to have always image on the top and text at the bottom, do you think it is possible?
thanksHey acidwhisper,
Thank you for using Enfold.
One workaround it to duplicate the section and then configure the Screen Options. You’ll have two version of each section, one for desktop and another for mobile view. Another thing that comes to mind is by setting the display property of the columns’ parent container to “flex” and then specify columns’ order property manually.
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Best regards,
IsmaelHello Ismael,
thank you for your reply very usefull.
I managed to solve with the first solution, unfortunatelly this solution gonna produce a fall back on SEO because the content will be duplicated (double H2 with same title, double descriptions, double links, etc) and printed in the HTML that is something I would avoid If I knew how to do it.
Any suggestion on this? or maybe this is something to be included in the next release?
thanks
Hi acidwhisper,
This is the way it is, for now, you could go for the second solution and use flexbox.
If you need further assistance please let us know.
Best regards,
VictoriaHello
I have this problem too, and so how do I implement the 2nd option, i.e.
“Another thing that comes to mind is by setting the display property of the columns’ parent container to “flex” and then specify columns’ order property manually.”
for example for the page below? I would like to set all columns to always display with picture first, as the opening post said, for this page. Since there are many pages the same, can I do so for all such pages or at least a page at a go rather than setting each container? It seems to be s fairly normal thing one should be able to set in the theme.
Thank you
Hi s29ers,
Yes, of course, you can make a general css rule that will affect all those pages.
If you need further assistance please let us know.
Best regards,
VictoriaHi
Yes, so can you please help with a rule to affect one page and all pages? I’m not sure what exactly this CSS will be like.
ThanksHi s29ers,
Actually, I looked again and I think the css will have to be specific to the page and the elements on the page. You will need to be adjusting every page to have images on top on mobile. You wan the images on top on mobile, correct?
Best regards,
VictoriaHi Victoria,
Yes. hopefully there’s an easy way to specify that for small screens for the site.
I would have thought the theme would provide that as an option for mobile / small screens so you could choose the order of column display, i.e. if on desktop the cols are 1, 2, 3, 4 then for mobile options you could have default, or specific order where you specify vertical or reading order 3, 1, 2, 4 or whatever you want for the page. It’s worth adding since this would be a normal occurrence for many people who’s desktop column layout is not working on mobile due to default ordering. Would save an enormous time vs element by element and page by page.
Thanks
Hi,
Yes. hopefully there’s an easy way to specify that for small screens for the site.
There is no option for that, unfortunately. You have to use the css flex rule to manually re-order the columns on every page or section. The custom css class attribute will help but it will still be a lot work if the order of the columns varies on different pages.
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Example:
.first-column { order: 1; } .second-column { order: 2; }That css code will work assuming that the column with the image has the “first-column” class attribute and the column containing the text has the “second-column” class attribute.
Best regards,
Ismael
- You must be logged in to reply to this topic.