Stop Large-device column width auto adjustment to 100%

  • Resolved pietpompies

    (@pietpompies)


    5 years, 9 months ago

    Hi There,
    At the moment columns on large-device view is forced to total 100% per row. This is causing a stacking problem for some odd amounts of columns.

    I’ll try to explain:
    There are 5 units (columns).
    On large-device I would like columns to stack [3] x [2]
    Then medium-device stack to [2] x [2] x [1], small will go singles.

    At the moment the 100% auto calculation is stopping this stacking from working as it will force all 5 units in one row for large-device.

    When I try using two rows instead with 3 units in one and two in the other, this only works for large-device. On medium-device the second row will not bump up and you get [2] x [1] + [2] instead, because the 2 rows will now display in-line so to speak.

    Is there a way we can get this grid configure to work?
    Another example is 6 units where
    on large we want [3] x [3] and medium [2] x [2] x [2]. Even though the are 6 equal pieces, we never want them on the same row.

    or Put differently, how can we force separate rows to display inline on large devices.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @pietpompies,

    I can see what you’re trying to do but that’s unfortunately not possible via our builder’s UI. The columns are contained in another container(col-group) before the row’s to achieve certain functions our builder offers and is what stops it from working.

    We also made it that way so it’s easier to via the UI.

    What you’re trying to achieve is certainly possible with a bit of custom CSS. Just drop a 5/6 column row to the page, add a class to each column, then use the snippet below.

    .custom-col-widths {
  width: 33.33%;
}
@media (max-width: 992px) {
  .custom-col-widths {
    width: 50%;
  }
}
@media (max-width: 768px) {
  .custom-col-widths {
    width: 100%;
  }
}

    Just replace custom-col-widths with the class you’ve added. And you can place it under Tools > Layout CSS/JS > CSS so it only gets added to that page alone. ??

    Ben

    Thread Starter pietpompies

    (@pietpompies)

    Thanks Ben, That works

    – this would be a great feature request as it’s already part of othereditors like VC, Not sure how to word it though.

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    Awesome! And no worries at all, @pietpompies. ??

    We do get a lot of inquiries about this but it might be hard to implement with the way our column system works. I’ll definitely keep it in mind though and mention it to the team in one of our meetings.

    Enjoy BB!

    Ben

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Stop Large-device column width auto adjustment to 100%’ is closed to new replies.