Helix Ultimate - How To Change The Order Of The Areas Displayed In Mobile Mode Compared To Desktop Mode
Ottele
In Joomla 5 using the Helix Ultimate template, I would like to change the order of the areas displayed in mobile / tablet modes compared to the desktop mode.
In desktop mode I have for the Main Body 3 areas: left area - Component area – right area
My component-area is an iframe wrapper area.
In mobile mode, I want to see :
first the Component area
under the Component area I want to see the contents of the left area
under the left area: the contents of the right area
In tablet mode, I want to see :
left + Component areas in one row
under this the contents of the right area
My test site is ottele.lu
Is that possible? Many thanks for any help.
Kind regards, jm
Paul Frankowski
Accepted AnswerHi JM,
Is that possible?
In general, Yes
How?
Only by Custom CSS and @media and order property. You cannot do that by settings.
This is typical CSS task. Read more about those and use it for for those ID #sp-left, #sp-right and #sp-component.
Ottele
Accepted AnswerOk, many thanks for your help.
I thought that there has to be an easier solution, for instance double the Main Body in the Layout of Helix Ultimate, one for desktop, and one for mobile (configured with the Responsive options), but in the Layout I can define only one zone as "Component".
I have found also a solution naming Custom CSS Class for Left "order-2 order-lg-1", and so on, with the following Custom CSS:
/ Default desktop styles / .main-body { display: flex; flex-direction: row; }
.left-area { order: 1; } .component-area { order: 2; } .right-area { order: 3; }
/ Mobile/tablet: stack vertically and reorder / @media (max-width: 991.98px) { .main-body { flex-direction: column; }
.component-area { order: 1; } .left-area { order: 2; } .right-area { order: 3; } }
but there was missing one step...
I have "solved" now my problem, by no showing Left for mobile with the Responsive options, which is not what I initially wanted, but ...