7 columns in a row on desktop, 2 columns on mobile - Support

Tagged: columns

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 25, 2019 at 7:45 pm #1071443
HagenWittig
Participant
Hello everyone!

I am using the Enfold theme and would like to create a section with seven columns side by side. I already tried the following instructions – unfortunately without success:

https://kriesi.at/documentation/enfold/columns/#six-columns-or-more
https://kriesi.at/support/topic/7-columns/
https://kriesi.at/support/topic/6-column-grid/

I assume that some other setting is overwriting the CSS for seven columns.

Could you please help? I have posted a link to my construction page (you can find the current five + two ;-) columns there) and login credentials in the private content field.

Additional question: On mobile devices, I would like the seven columns to break down to a 2+2+2+1 layout.

Thanks a lot.

Best regards,

Hagen
- This topic was modified 6 years, 1 month ago by HagenWittig.
February 28, 2019 at 11:23 am #1072599

Ismael
Moderator

Hey HagenWittig,

Thanks for the update.

Did you apply the “one-seventh” class attribute to the columns as suggested in the previous thread?

// https://kriesi.at/support/topic/7-columns/#post-853059

You have to turn on the custom css class field first if you haven’t already.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

Best regards,
Ismael

March 1, 2019 at 12:49 pm #1073128

HagenWittig
Participant

Hi Ismael!

Thanks a lot for your reply.

Yes, I did it exactly as described by Nikko in the thread you mentioned. Unfortunately nothing happens.

I assume that some other setting is interfering with the CSS code. But which one?

Best regards,

Hagen

March 2, 2019 at 5:03 am #1073499

Ismael
Moderator

Hi,

Thanks for the update.

You have to turn off the “equal height” option because the last two columns are wrap inside their own container.

Best regards,
Ismael

March 5, 2019 at 4:08 pm #1074940

HagenWittig
Participant

Hi Ismael!

That has helped. Thanks a lot. Never thought this setting was the problem.

However, I need the columns to be of equal height. What do I have to add to CSS in order to achieve that?

Thanks in advance!

Best,

Hagen

March 6, 2019 at 5:21 am #1075264

Ismael
Moderator

Hi,

Thanks for the update.

You can apply a minimum height to those columns but the value will have to be adjusted on different screen sizes.

Best regards,
Ismael

March 7, 2019 at 9:14 am #1075860

HagenWittig
Participant

Hi Ismael!

Thank you. Everything is solved now and you can feel free to close the topic.

Best regards,

Hagen

March 9, 2019 at 5:29 am #1076573

Rikard
Keymaster

Hi Hagen,

Great, I’m glad we could help. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘7 columns in a row on desktop, 2 columns on mobile’ is closed to new replies.