Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Controling How Grid Collapses to Single Column

  • I’ve been playing around with my a grid element I have setup that looks really nice on Desktop and Tablet. It’s got six containers and alternates between image text, text image, and image text rows.

    I’ll link to the page I’m referencing down below.

    The problem I’m now trying to solve is on mobile when the grid collapses down to a single column. Due to the order of the containers in my two-column layout on Desktop and Tablet sizes, the grid collapses down to an order of image -> text -> text -> image -> image -> text.

    Is it possible to control how the grid containers collapse and maybe switch to order? I’d like the mobile single column to read image text, image text, image text but I don’t think it’s possible with how I have things setup.

    Maybe I need to switch to a container layout with flex-box instead and drop the grid element, although I’m afraid I’ll run into a similar issue.

    Any insight here would be great.

    Thanks

  • Hi there,

    Yes, there is an easy fix to this.

    First, go to mobile view. Reference: https://docs.generateblocks.com/article/responsive-controls/

    Then, set an order value to the column Containers. You can set them to 1, 2, 3, 4… respectively to arrange them in an order you want. Reference: https://docs.generateblocks.com/article/layout-options-overview/#order

    Let us know how it goes.

  • Oh my gosh perfect! This is exactly what I needed. Thanks Fernando!

  • Marking resolved.

  • You’re welcome, Adamugo!

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