![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
June 15, 2022 at 4:59 pm #1355360
I am trying to use the technique described here to lay out columns that don’t add to 100% as centred/centered in a color section.
I’m doing it verbatim (even using the id) and it’s not working. It’s always rendering the columns to fill the space rather than adding equal space on either side.
Any ideas?
June 15, 2022 at 8:15 pm #1355390Hey ilowelife,
Could you post a link to where we can see the results you are getting please?
Best regards,
RikardJune 15, 2022 at 9:58 pm #1355405This reply has been marked as private.June 16, 2022 at 10:54 am #1355457Hi,
Thanks for that. The columns looks centered on my end, is that not what you are looking to achieve? I’m not sure I understand your intentions so please try to explain them a bit further, or post screenshots highlighting what you would like to achieve.
Best regards,
RikardJune 17, 2022 at 9:46 pm #1355644Hi @Rikard
The issue is not that they’re not centred, it’s that the code provided in the example does not maintain the specified relative column sizes. The output in the documentation (https://kriesi.at/documentation/enfold/example-of-center-align-columns/) is what I’m looking for, but in my case, the columns continue to occupy the full width by expanding past their designated 1/4 or 1/3 size.
In the documentation, the centred columns keep their width designation. When I use the same code, the columns fill the available space, at least in any browser on my machine. Please see screenshots:
https://drive.google.com/drive/folders/1Ez2QQ4T8EKkUHMnqDP9oZULRORoPUhYG?usp=sharingI notice that the example code is using an older version of Enfold, so does the CSS snippet need to be updated with a new selector?
June 18, 2022 at 11:04 pm #1355721Hi,
Thank you for the link to your site, I see that you are using Equal Height columns, when you do the inner columns are wrapped in a flex_column_table and a av-flex-placeholder is added between the columns.
If you use Individual Height columns your width issue would be corrected, but I assume that you wish to continue using Equal Height columns, so try changing the color section ID to eh-center-align-columns for Equal Height columns, and ih-center-align-columns for Individual Height columns.
Then use this css:#ih-center-align-columns .entry-content-wrapper, #eh-center-align-columns .entry-content-wrapper .flex_column_table { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: center; } #eh-center-align-columns .av-flex-placeholder { display: none; }
After applying the css, please clear your browser cache and check.
expected results:
Best regards,
MikeJune 18, 2022 at 11:43 pm #1355724Thank you @Mike.
This worked.
Honestly, you folks would save yourselves a lot of trouble if you just productized this kind of thing. It would be less brittle and you’d have more long-term control over it. A tidy little checkbox to ‘center columns’ would probably do it :-)
I appreciate the support.
June 19, 2022 at 12:03 am #1355725Nevermind. I think I have it.
@Mike – I spoke too soon.This solution doesn’t seem to respect the column spacing. In your example it seems to, but on my site it doesn’t:
Anything to be done about that?
June 19, 2022 at 12:25 am #1355729June 19, 2022 at 1:03 am #1355738Yes, thank you.
June 19, 2022 at 1:09 am #1355740Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Centering /centring columns not working’ is closed to new replies.