add support for more section layouts

  • Resolved farhan25

    (@farhan25)


    4 years, 1 month ago

    I just want to create a section with 6 columns in the layout.
    I was planning to make:

    1. two rows with three columns for each row, for the desktop view.
    2. three rows with two columns for each row, for the tablet view.
    3. six rows with one column for each row, for the mobile view.

    but unfortunately I can’t implement this layout for the desktop view.
    I noticed a similar cases for 4 & 5 columns as well, for desktop view.
    Please add other layout support for desktop view, at least as same as tablet.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Hey @farhan25,

    In that case, you can just make two different Sections with each having three columns.

    Then you can use Advanced settings to hide that section on Desktop. It won’t be possible to have a stacking option for Desktop as it can be just solved with two Sections, while Tablet may need stacking for responsive reasons.

    Let me know if that makes sense to you.

    Thread Starter farhan25

    (@farhan25)

    Hello @hardeepasrani
    Thanks for your reply,
    Sorry but it doesn’t work for me because I want 6 columns.
    If I used 2 sections approach, it will break to 4 rows on tablet (2, 1, 2, 1) but I need only one section so it will break to three rows (2, 2, 2) on tablet.
    On desktop I can achieve (3, 3) with two sections, but then the problem will be on tablet.
    I don’t want to use hide on desktop option since it’s not too practical and I’ll have to double editing in the future.
    Thanks for reading.

    danamv

    (@danamv)

    Hello @farhan25,

    The two different sections with 3 columns can each be used for Desktop only, and you may hide them from Advanced Settings for Tablet and Mobile.
    After that, I suggest making another three sections, with two columns each, which will be available for tablet and mobile, by hiding them for the Desktop.
    This way, you will have (2 rows,3 items) for Desktop, (3 rows, 2 items) for Tablet, and (6 rows, 1 item) for Mobile.

    Another approach will be to look for a post type grid block, like the Posts one, that allows the number of items per row to be chosen rather than splitting the page layout in three or two equal areas. This way, you can have more control over the number of items in a row.

    I hope this will help!

    Thread Starter farhan25

    (@farhan25)

    @danamv
    Thanks for your reply,
    What I want to achieve is super easy in bootstrap for example (or other flex libraries).
    The first approach is not good enough because it will increase the DOM size and will cause double editing for desktop / tablet & phone.
    I don’t know much about the second approach with grid block, but my data is static not dynamic so maybe I don’t need a post type.
    I will try the second approach though.
    Thanks for reading.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘add support for more section layouts’ is closed to new replies.