Set minimum number of rows to two on mobile version

Support
#1

I use a 5-row layout on our website for the team section:

Is it possible to set the minimum number of rows to two (also on mobile)? Currently, I get this:

#2

Hey Fabian,

Regretfully, this is not offered currently. Though this is possible with custom CSS which I will show you, this would be outside the scope of our support. I will only show you to provide some guidance or starting point. To continue with custom development, you will need to learn CSS especially Flexbox. We have a Flexbox tutorial in here: https://theme.co/apex/forum/t/using-flexbox/24851

Below is the code used in this setup demo: https://youtu.be/kRUYBX5JNyc. Please note that it is not perfect. You will need to adjust things here and there that’s why I’d strongly recommend that you learn Flexbox.

@media (max-width: 767px) {
  $el {
    display:flex;
    flex-wrap: wrap;
  }
  $el .x-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 33.3%;
    justify-content: center;
    align-items: center;
    margin: 0 0 20px;
  }
}

Hope that helps and thank you for understanding.

2 Likes
#3

Hi Christian

Thank you a lot for doing this tutorial! That’s a very helpful starting point.

With your code snippet, I get this (margins need to be adjusted):

Is there a way to avoid this break? (after team member “Mathias Bürki”)

I guess the easiest thing would be to start from a 4-row layout, but I was wondering if there is also such a thing like a continuous 5-row-layout which rearranges the grid for mobile?

Btw, our website is https://sevensense.ch.

Cheers,
Fabian

#4

You’re welcome, Fabian.

I won’t recommend that you modify the margins. You can add padding to the column to space them out. If you want to modify the margins though, you also would need to modify the flex percentage.

Regretfully, we could not continue supporting the custom code so I’d recommend that you learn Flexbox from the link I’ve given previously.

I’m not sure what you mean but you can try using The Grid or Essential Grid instead as both plugins offer configurable column number per pre-configured screen size.

For more details and usage instructions, please check out the links below:

Thanks.

#5

This looks like what I’ve been looking for, will try this later. Can I install this as en extension?

#6

Hello Fabian,

Thanks for updating the thread. :slight_smile:

Yes, you can install The Grid extension from Pro > Validation > Extensions. In previous reply my colleague has shared getting started guide that you can take a look.

Thanks.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.