[Support request] Can a grid have x2 columns on a mobile view?

Home Forums Support [Support request] Can a grid have x2 columns on a mobile view?

Home Forums Support Can a grid have x2 columns on a mobile view?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1592692
    Henry

    Here’s what I am trying to achieve: a row of icons on a horizontal row.

    My approach is using a block and:

    1. Creating a container
    2. Then, create a grid with x6 columns
    3. Then, add the icon in each column

    This approach ^ works great in desktop + tablet, but on mobile, it looks a bit thin with a lot of white space on each side.

    Ideally, I’d love to see a 2 column grid on mobile.

    Can this be done or would I need some CSS to hide/show the containers?

    I thought I could create TWO identical containers and hide one or the other depending on the media query with different arrangements…using something like this:

    #content-desktop {
      display: block
    }
    
    #content-mobile {
      display: none
    }
    
    @media screen and (max-width:768px) {
    #content-desktop {
      display: none
    }
    #content-mobile {
      display: block
      }
    }

    This alas didn’t work…

    Any suggestions, workaround?

    #1592733
    Henry

    Ah! I have my answer….

    This has been answered here and it works great!

    https://generatepress.com/forums/topic/generateblocks-hide-container-on-mobile-tablet-desktop/

    #1592774
    Ying
    Staff
    Customer Support

    Hi Henry,

    Using the hide-on-mobile class is not the best solution.

    The main issue here is that you are not setting the grid system correctly.

    There should only be one Grid block with multiple Container blocks inside, so your block navigation should look like this:
    https://tinyurl.com/y7uyw62a

    Then you can click the container inside the grid to set the mobile width which is default to 100%.
    https://tinyurl.com/yabknvn2

    More info here:
    https://docs.generateblocks.com/article/grid-overview/#adding-more-grid-items

    Let me know ๐Ÿ™‚

    #1593078
    Henry

    Thanks – very useful – appreciate it.

    #1593404
    Ying
    Staff
    Customer Support

    You are very welcome ๐Ÿ™‚

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.