ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down.
Read our Farewell Blog Post for more details.
Modifying pages for Mobile Devices
-
-
- Alex Ragozzino
- Rocketeer
- Posts: 96
- Thanks: 1
-
I just ahave a general question about how best to modify pages for mobile devices if the built-in functionality in gantry 5 needs some tweaking or in some cases there is a need display or hide certain particles or other items on mobile devices but display them on larger screens.
Even the ability to adjust something like font sizes based on devices.
Thanks!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
With Gantry 5 the page is the same page as desktop - it's just that the blocks get rearranged to fit better on mobile devices. You can show/hide modules using the responsive support classes
http://docs.gantry.org/gantry5/tutorials/utility-classes
.
You can adjust font sizes by viewport using CSS and media queries http://docs.gantry.org/gantry5/tutorials/media-queries .
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. -
The following users have thanked you: Alex Ragozzino
- 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.067 seconds