SOLVED Page Layout ordering on a Mobile Device
-
-
- isabeaux
- Jr. Rocketeer
- Posts: 26
- Thanks: 8
-
Hi
I'm setting up my site on Gantry 5 with the Xenon template. The main section has a left side bar with particles and modules. I don't have a right side section.
When seeing the site on a narrow moblie device, it orders everything in one column with all the items in the left side section before (above) the main article. So the user has to scroll down, sometimes quite a bit depending on the amount of content on the sidebar, before they reach the main content.
Is there a way to set the order so that the main content comes before the side modules on the moblie layout?
Thank you and Happy Thanksgiving!
Tomás
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Not really, no. Left to Right collapses to a single column top to bottom on a mobile device. The only thing you can do is to duplicate the content to another section and then use the responsive support classes (e.g. "hidden-phone", "visible-phone", etc) to show/hide the content.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- isabeaux
- Jr. Rocketeer
- Posts: 26
- Thanks: 8
-
Thanks Mark, that could well be a solution.
Since I have a lot of modules that change on a regular basis, duplicating each of them manually is not really an option.
However:- if in the page layout I set two sidebar sections next to the main content, Sidebar-Left and Sidebar-Right.
- In both those sections I set a module position "Sidebar".
- For Sidebar-Left I add class "hidden-phone"
- on Sidebar-Right I add class "visible-phone".
- All the modules in for the sidebar are set to position "Sidebar"
- if in the page layout I set two sidebar sections next to the main content, Sidebar-Left and Sidebar-Right.
Would this work without generating conflicts?
Thanks
Tomás -
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Yes it should but bear in mind that you are then downloading twice as much information as you need in each page and the section/position will still occupy space on the layout (even if hidden).
Regards, Mark. -
The following users have thanked you: isabeaux, Billie Carroll
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Vinny Hébert
- Jr. Rocketeer
- Posts: 37
- Thanks: 0
- Bootstrap and Uikit have the "Push" element. Is that something you can add to gantry?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Vinny Hébert - please don't post in dormant topics that are over a year old or we might miss your post altogether. It's always better to create a new topic of your own.
You can use Bootstrap and you can use uikit in Gantry 5 - so the answer is yes.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.063 seconds