0
Welcome Guest! Login
0 items Join Now

You are not authorized to access that page, please login...

SOLVED Category list from 2 to 1 column on small screen.

    • Robert's Avatar
    • Robert
    • Newbie
    • Posts: 18
    • Thanks: 0

    SOLVED Category list from 2 to 1 column on small screen.

    Posted 8 years 1 month ago
    • Hi,

      I have my Articles set up to show 2 articles (columns) per row.
      Can I set this to become 1 article per row for screenwidth<600?
      Without changing the breakpoint.
      And I love javascript Atoms.....

      Joomla 3.5
      Gantry 5 - Hydrogen
    • Last Edit: 8 years 1 month ago by Robert.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Category list from 2 to 1 column on small screen.

    Posted 8 years 1 month ago
    • Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Please do a screenshot of your problem and annotate to make it clear.

      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.
    • Robert's Avatar
    • Robert
    • Newbie
    • Posts: 18
    • Thanks: 0

    Re: SOLVED Category list from 2 to 1 column on small screen.

    Posted 8 years 1 month ago
    • Hi Mark, thanks for your reply.

      When the page width is like in this image, I would like the articles not to be shown next to each other but just one article per row. I can do this by adjusting the breakpoint but then the margins also change. So I actually want the same effect as when the "catagory list" is set to 1 column per row.

      This image is hidden for guests.
      Please log in or register to see it.



      sultanabubakarmuseum.com/index.php?optio...4&Itemid=131&lang=en
    • Last Edit: 8 years 1 month ago by Robert.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Category list from 2 to 1 column on small screen.

    Posted 8 years 1 month ago
    • I have given you all the Gantry 5 media queries below... I add the code required to the "tablet" media query. The breakpoints in Gantry 5 can all be changed in the Gantry 5 admin - this is why you should use the mixin values rather than a hardcoded px value.
      // 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) {
       .blog .row-fluid .span6 {
          width: 100%;
       }
      }
      // 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) {
       
      }
      // typically max 59.938rem
      @include breakpoint(no-desktop) {
      
      }
      
      // Mobile Menu Breakpoint
      @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 
      
      }
      
      @import "nucleus/mixins/breakpoints";

      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: Robert

    • 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.
    • Robert's Avatar
    • Robert
    • Newbie
    • Posts: 18
    • Thanks: 0

    Re: SOLVED Category list from 2 to 1 column on small screen.

    Posted 8 years 1 month ago
    • Thanks Mark, that solved it...

      I use a JS Atom now to adjust the CSS .

      if(window.innerWidth<900){
      var myElements = document.querySelectorAll(".blog .row-fluid .span6");
      for (var i = 0; i < myElements.length; i++) {
      myElements.style.width= "100%";
      }
      }

Time to create page: 0.049 seconds