0
Welcome Guest! Login
0 items Join Now

How to use the Gantry 5 Grid system to not stack on mobile

  • How to use the Gantry 5 Grid system to not stack on mobile

    Posted 6 years 6 months ago
    • Hi,

      Could someone direct me to the documentation on how to force the grid not to stack on mobile? Say I have 4 columns on desktop and I would like to have 2 columns side-by-side with the other 2 below it on mobile.

      I saw these pages, but they don’t outline the classes to do that:
      docs.gantry.org/gantry5/advanced/responsive-content
      docs.gantry.org/gantry4/advanced/responsive-grid-system

      I’m very familiar with Bootstrap, and it sounds like Gantry 5 is using their grid system. So maybe I just need to understand the new class names. Here's how I would HTML it with Bootstrap:

      <div class="container">
      <div class="row">
      <div class="col-xs-6 col-sm-3">One</div>
      <div class="col-xs-6 col-sm-3">Two</div>
      <div class="col-xs-6 col-sm-3">Three</div>
      <div class="col-xs-6 col-sm-3">Four</div>
      </div>
      </div>

      Thanks!
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How to use the Gantry 5 Grid system to not stack on mobile

    Posted 6 years 6 months ago
    • You can't directly since that is how Gantry is designed to work. So the best thing to do is to create your own classes set and use media queries to give you the widths that you need at different viewport sizes.

      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.
  • Re: How to use the Gantry 5 Grid system to not stack on mobile

    Posted 6 years 6 months ago
    • Is his suggestion the only way to do it? I would assume that the grid system in Gantry 5 has the flexibility to allow columns on mobile, especially since I read somewhere that it's using Bootstraps grid system.
    • Last Edit: 6 years 6 months ago by Nicole Davolt.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How to use the Gantry 5 Grid system to not stack on mobile

    Posted 6 years 6 months ago
    • The Gantry grid system is designed to be columnar until you hit mobile viewport size at which point all the separate columns drop into a single column. So, yes, this is the only way to do it if you want columns on mobile view. There is CSS in Gantry 5 that resets the "size-25" (example of 25% column width) to 100% at mobile viewport size. So, instead of using the Gantry "size-25" (example) you would need to use your own class like "mysize-25" which would always remain at 25% regardless of viewport size. Personally I don't think this is necessarily a good idea as on small mobile devices the columns would be tiny and probably unreadable (hence why Gantry 5 does what it does).

      Regards, Mark.
    • The following users have thanked you: Nicole Davolt

    • 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.055 seconds