Uneven boxed layout / grid

[mikireimann]

For this page I would like to have a somewhat boxed layout (similar to this one: https://www.edx.org/course/introduction-kubernetes-linuxfoundationx-lfs158x#) How can I achieve the column on the right to be whole and the left to have different compartments - either another color or frame.

I tried to add a sidebar, but then the title is not at the top of both columns… Please help…

[ruenel]

Hello There,

Thanks for posting in! I have logged in and edited your page. In the row settings, I added a custom equalize class. This class is needed to target which rows you want to have the equal heights for the columns. I then added a custom JS code

(function($){
  $(window).bind('ready load resize', function(){

        mobile = $(window).width();

    if ( mobile > 767 ){
 
      $('.equalize').each( function() {

      var max = 0

      $(this).find(".x-column").each(function(index, el) {
        if( $(this).height() > max ){
            max = $(this).outerHeight();
        }
      });

      $(this).find(".x-column").css('min-height', max);

      } );

    } else {
        
            $('.equalize .x-column').css('min-height' , 0 );

    }


  });
})(jQuery);

Please check your site now.

[mikireimann]

Thank you so much, but I am not sure what that means… So how can I make it look like this:or like this

[christopher]

Hi there,

TO\o achieve the look you are after, You can simply use the combination of the sections and columns, whenever you want to have a box just add the border to the columns for example. For more information about the layout options that you have at hand in Cornerstone please read this article:

Creating Layouts | Themeco Docs

Thank you.