[atg85Participant]

Hi X!

Have a look at a site I’m building here – and scroll down a bit.

http://mercurius.ca/whitmore/relocation/

You will see that I’ve devised a bit of a design for the content to make interesting. What can I do to display the columns as even squares (I’ve seen it in many themes) rather than flexible rectangles and to center the content within them? It would do a lot for me design wise 🙂

Thank you!

[Rue NelModerator]

Hello There,

Thanks for writing in!

To position the contents of each column, please make sure that you have enabled the marginless columns in your row settings and insert the following custom css in the settings tab, Settings > Custom CSS

.x-section .x-container.marginless-columns .x-column {
    vertical-align: middle;
}

To make the columns square, you need a custom JS script to do it. Please go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
  var W = $(window).width();
  if( W >768 ){
    $(window).on('load resize', function(){
      $('.x-section .marginless-columns .x-column').each(function(){
        var thewidth = $(this).width();
        $(this).css('height', thewidth);
      });
    });
  }
})(jQuery);

Please keep in mind that this code will change the heights of the columns equal to its width. The wider the column, the height becomes higher and higher forcing the columns to be always a perfect square.

We would loved to know if this has work for you. Thank you.

[atg85Participant]

Ha! That works! Very nice. Thank you:)

[NicoModerator]

Happy to hear that.

Have a great day! 🙂 Feel free to ask us again.

[Author]

Posts