Centering Flexible Columns within a module group

Develop, Build & Integrate CMS Development
1

Hi Community,

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

borkacer_4-1636112944039.jpg
borkacer_4-1636112944039.jpg1897×1067 525 KB

This is the layout in the Design manager:

723×164 13 KB

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”:

496×196 28.6 KB

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

borkacer_3-1636112721132.png
borkacer_3-1636112721132.png528×527 83.9 KB

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

2

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

3

Hey @Oezcan ,

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

4

Hi @borkacer ,

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

5

Hey @borkacer ,

i tried with

.container-equal-columns {

margin: 0 auto;

}

.container-equal-columns .row-fluid {

display: flex;

justify-content: center

}

Oezcan_0-1636117825845.png
Oezcan_0-1636117825845.png1700×585 124 KB

Oezcan_1-1636117881071.png
Oezcan_1-1636117881071.png1881×733 96.3 KB

Maybe it will work that way for you too

best regards,

Özcan

6

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;

}

Oezcan_0-1636120141416.png
Oezcan_0-1636120141416.png1688×768 158 KB

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

best regards

Özcan

7

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.

8

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