0
Welcome Guest! Login
0 items Join Now

Particle Info List

    • WebMax's Avatar
    • WebMax
    • Rocketeer
    • Posts: 97
    • Thanks: 0

    Particle Info List

    Posted 3 years 9 months ago
    • Hi, for a desktop I've set up Info List to show 5 items in a row (5 columns). When I view the same module in a mobile, it automatically defaults to one item per row. Is there a way to force the number of items to 3 or any fixed number for mobile view? Looking forward to your assistance. Thanks so much.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Particle Info List

    Posted 3 years 9 months ago
    • Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.

      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.
    • WebMax's Avatar
    • WebMax
    • Rocketeer
    • Posts: 97
    • Thanks: 0

    Re: Particle Info List

    Posted 3 years 9 months ago
    • Details are in the secure tab. So my desktop works as expected which is 5 items in a row. It's just the phone view which am hoping to show 3 items in a row.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Particle Info List

    Posted 3 years 9 months ago
    • I see you've now duplicated all the content and used alternate particles using the responsive support classes, this is very wasteful since both versions will be downloaded to the browser: I'd suggest this instead:
      // Gantry 5 custom CSS file
      
      // import breakpoints
      @import "dependencies";
      
      // Typical values are the default breakpoints set in Gantry 5
      // but these values are user definable in style settings
      // so that is why the code below uses mixins to get the actual 
      // values from Gantry 5 template.
      
      // commonly used media queries
      
      //  typically min 75rem 
      @include breakpoint(large-desktop-range) {
      
      }
      // typically range 60rem to 74.938rem 
      @include breakpoint(desktop-range) {
      
      }
      
      // typically 48rem to 59.938rem
      @include breakpoint(tablet-range) {
      
      }
      // typically 30rem to 47.938rem
      @include breakpoint(large-mobile-range) {
      
      }
      // typically max 30rem
      @include breakpoint(small-mobile-range) {
      
      }
      
      // Less commonly used media queries
      
      // typically min 60rem
      @include breakpoint(desktop-only) {
      
      }
      // typically min 48rem
      @include breakpoint(no-mobile) {
      
      }
      // typically max 47.938 rem
      @include breakpoint(mobile-only) {
          .g-infolist[class*="cols"] .g-infolist-item {
              width: 31%;
              margin-left: 1% !important;
              margin-right: 1% !important;
              overflow: hidden;
            }
            .g-infolist .g-infolist-item-img {
              min-width: 60px !important;
            }
      }
      // typically max 59.938rem
      @include breakpoint(no-desktop) {
      
      }
      
      // Mobile Menu Breakpoint
      @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 
      
      }

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