-
Posts
-
Have spent a few hours trying to center these two elements following other threads and reading your documentation, but nothing works. Could you please have a look? Right now I have a 1/5 element before them, so that they wouldn’t be left-aligned and they’re off-center. I’ve tried converting the 1/5 to 1/6, no luck. Have also tried the CSS to center align columns within a color section as described in your documentation, but it doesn’t work, either. The text elements right above and underneath these elements are in the same color section.
Hey Court_2,
Please try using 1/2 elements instead and try to add padding or margin to them.
Best regards,
RikardHi Rikard,
Padding won’t work, because the elements have borders. Adding a 240px left margin to the 1/3 left element would work, but I’m having problems coming up with the correct css to do so. The custom css class of the column is “spokeo” and it just won’t move whatever I try.
Without the actual HTML and CSS (link to the page) i try to make a blind guess:
– give the color section a custom class, for example: “centered-columns”
– add this CSS to your child theme or custom CSS:.centered-columns { display: flex; justify-content: center; }Does that work?
Info about Flexbox CSS:
=> https://css-tricks.com/snippets/css/a-guide-to-flexbox/———-
Here is a working example with flexbox:
=> http://jsfiddle.net/wqD62/It needs to be adjusted to the actual HTML you have, but the underlying concept works.
Hi Court_2,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#instant_search div .av_one_third { margin-left: 3%; }If you need further assistance please let us know.
Best regards,
VictoriaThat didn’t work, either. But I got them centered and yet this didn’t make sense to me:
I used the css from you documentation:
/* Center align columns inside color section*/
#av-center-align-columns .entry-content-wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}It didn’t work with having only the two 1/3 columns in the row, but when I added the 1/5 column before the two, it centered the two. And it didn’t matter whether I used the actual name of the color section “instant_search” or the example name “av-center-align-columns” in the css. Anyway, discovered this by accident and they’re centered now :).
Hi,
Great, I’m glad that you found a solution and thanks for sharing. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard@Court_2 and @cg -> This works.
I did notice that it only works if the .my-custom-class-name is placed in the Custom CSS Class field of the Color Section that holds the Layout Elements. Then the Row Layout in the first Layout Element needs to be set to individual height. If it’s set to equal height the columns stretch to the full width of the Color Section.
To get the columns equal height, I use the Equal Height Columns plugin by MIGHTYminnow on the elements (like a text box) inside of the individual Layout Elements.
/* Center align columns inside color section*/
.my-custom-class-name .entry-content-wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}Hi,
@Shawn thank you for sharing, I’m sure someone will find this helpful.
Since this thread is from 2019 we will go ahead and close this, but if you have any further tips or questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Center two 1/3 layout elements within a color section’ is closed to new replies.