Resizing space between columns + centering them on the page

Hi,

Sorry for the delay. Please edit the column and set the Row Setting > Row Layout > Space between columns to the first option to create space between the columns. After that, set the Styling > Background > Background Repeat to Stretch to Fit. We can then use css to adjust the width of the columns or the space between them.

#top .av_one_third {
   width: 32%;
   margin-left: 2%;
}

Best regards,
Ismael

Hi,
Sorry for the late reply, the page doesn’t seem to exist right now, do you still need help with this?

Best regards,
Mike

Hi,
Thank you for pointing this out, I took a look at your page and tested the css above and see that the first column has “float: right” applied.
To center these columns I added this css, which is only applied to this one page.

#top.page-id-10687 #after_section_1 .entry-content-wrapper .av_one_third {
width: 27%;
margin-left: 1%;
margin-right: 1%;
}
#top.page-id-10687 #after_section_1 .entry-content-wrapper {
	justify-content: center;
    display: flex;
}

Best regards,
Mike

Hi,
Thanks for the screenshot. This css will give you the 1% column margin for the 1/4 columns on that one page:

#top.page-id-10687 #av_section_1 .entry-content-wrapper .av_one_fourth {
width: 22%;
margin-left: 1%;
margin-right: 1%;
}

but to center the 1/4 columns we will need to wrap them in a div because the first few columns brake if they are also centered with flex, so to wrap the columns, try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
   $('#top.page-id-10687 #av_section_1 .entry-content-wrapper .av_one_fourth').wrapAll('<div id="coaching">');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');

also ensure that the option Enfold Theme Options > Performance > Load jQuery in your footer is disabled and no other plugin is moving the jQuery to the footer.
Then add this css:

#top.page-id-10687 #coaching {
	justify-content: center;
    display: flex;
}

Then clear your browser cache and check, please see the screenshot in Private Content area of the expected results.

Best regards,
Mike