topic Re: Centering Flexible Columns within a module group in CMS Development

Centering Flexible Columns within a module group

borkacer — Fri, 05 Nov 2021 11:49:56 GMT

Hi Community,

I am having trouble vertically centering flexible columns within a module group. Here is how it looks now in CMS hub :

This is the layout in the Design manager:

Each flexible column has a width: 15% assigned in the "inline styling".

The columns are under a module group with a CSS class ".container-equal-columns":

There is also another module group "5 columns" with a CSS class ".columns-service-page":

Can anybody help me to distribute those columns evenly and center vertically? I would like the width of the whole group module to stay 95% of the page and width of each flexible column 15%.

Thank you

Re: Centering Flexible Columns within a module group

Oezcan — Fri, 05 Nov 2021 12:42:24 GMT

Hi @borkacer ,

did you try display: flex and justify-content: center

or justify-content: space-between/around/evenly for container-equal-columns?

Maybe display: grid can also help.

Here are one guide for display flex and here for display grid!

Best regards,

Özcan

Re: Centering Flexible Columns within a module group

borkacer — Fri, 05 Nov 2021 12:45:36 GMT

Hey @Oezcan ,

I have tried all of that, in different combinations as well 😀 and with "margin: 0 auto !important" and still nothing. All the columns are still aligned to the left

Re: Centering Flexible Columns within a module group

Teun — Fri, 05 Nov 2021 13:04:38 GMT

Hi @borkacer ,

Can you share the page? Might be able to help out!

Re: Centering Flexible Columns within a module group

Oezcan — Fri, 05 Nov 2021 13:15:43 GMT

Hey @borkacer ,

i tried with

.container-equal-columns {

margin: 0 auto;

}

.container-equal-columns .row-fluid {

display: flex;

justify-content: center

}

Maybe it will work that way for you too

best regards,

Özcan

Re: Centering Flexible Columns within a module group

Oezcan — Fri, 05 Nov 2021 13:49:13 GMT

Hey @borkacer ,

i tried another variant and i'm more satisfied with it:

.container-equal-columns {

width: 80% !important;

}

and your .row-fluid:

.row-fluid {

display: flex;

justify-content: center;

}

please excuse my other solution beforehand if it did not help.

best regards

Özcan

Re: Centering Flexible Columns within a module group

webdew — Mon, 08 Nov 2021 12:25:16 GMT

Hi @borkacer ,

Please try this CSS:

if not shareme LIVE Url i will check and send you code

.container-equal-columns .row-fluid {
display: flex;
justify-content: center
}

.columns-service-page{
display: flex;
justify-content: center
}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

Re: Centering Flexible Columns within a module group

Oezcan — Mon, 22 Nov 2021 21:56:53 GMT

Hello @borkacer ,

did my suggestion help you? Were you able to center the modules? If not here is another solution:

.container-equal-columns .row-fluid { width: 95%; margin: 0 auto; }

Please let me know if we can help you.

Best regards,

Özcan