Docs

[ADS Media]

Hi,

I’m trying to acheive an effect similar to this:

I’ve created a Section with 0 padding, and a Row (1/2 + 1/4 +1/4) set to Marginless Columns with no container. I entered my content into the first column and added padding to make it the size I wanted. So now I have something that looks like this:

Now what I can’t seem to figure out is how to divide the other 2 columns into half vertically, while maintaining responsiveness. I’m not a CSS wiz, so adding 2 divs with “height: 50%” obviously did not work. Is there a way to calculate the height of the left column, and then set divs to equal half of that? Or is there another method that I just don’t know about?

Thanks in advance for any help!

[Rue Nel]

Hello There,

Thanks for writing in! Please be advised that Cornerstone will only have a basic row and column setup. There isn’t any feature that you can nest columns in a row. Perhaps you can check out this video if you really need to nest columns. Please check this out:

And if you want to have a column with the same height through out your site, please check out this thread: https://community.theme.co/forums/topic/make-columns-same-height-in-cornerstone/#post-314832

Hope this helps.

[ADS Media]

Thanks for the reply.

I’m not really looking to nest columns or anything like that. It may be easier if I break it down into 2 steps.

Step 1: I have a row set up with 1/2 + 1/4 + 1/4. I want to be able to make the 1/4 columns match the height of the main 1/2 column. If as the page resizes, column 1 gets taller or shorter, I want columns 2 and 3 to match. I found some code in previous posts on the forum that said they would accomplish this, but they were tailored to their specific layout and I wan unable to figure out how to adapt it to the 1/2 + 1/4 + 1/4 layout.

Step 2: I want to split columns 2 and 3 into half vertically. Basically columns 2 and 3 would consits of two divs that are always 50% of the height of the column stacked on top of each other. I just don’t know how to get it to calculate the height as height based percentages don’t work.

Here’s a link to the forum post about equal height columns: https://community.theme.co/forums/topic/make-columns-same-height-in-cornerstone/

Thanks in advance.

We develop on X-theme exclusively and You guys have always been spot on for supporting us in figuring out ways of doing things inside of x theme and cornerstone in the past so I figured I would run this by you and see if this is something you knew how to accomplish.

[ADS Media]

Update: I have made some progress!

I found this script that appears to be working somewhat.

var h = document.getElementById("main").offsetHeight;
document.getElementById("side").style.height = h/2 + "px";

First off, I am not a programmer so this is likely cringe worthy for anyone who knows what they are doing…

I set the primary column to have an id of “main”, and then set the first div to have an id of “side”. I then modified to code to work a second time for the second div with an id of “side2”.

var h = document.getElementById("main").offsetHeight;
document.getElementById("side").style.height = h/2 + "px";

var h = document.getElementById("main").offsetHeight;
document.getElementById("side2").style.height = h/2 + "px";

This worked so that when the page loaded it split my second column into 2 equal divs matching the height of the main column.

However, it wasn’t responsive, and upon resizing the window the divs would not change height. So I tried calling the script both during page load, and on window resize.

window.onload = function() {
var h = document.getElementById("main").offsetHeight;
document.getElementById("side").style.height = h/2 + "px";

var h = document.getElementById("main").offsetHeight;
document.getElementById("side2").style.height = h/2 + "px";
}

window.onresize = function() {
var h = document.getElementById("main").offsetHeight;
document.getElementById("side").style.height = h/2 + "px";

var h = document.getElementById("main").offsetHeight;
document.getElementById("side2").style.height = h/2 + "px";

This mostly works but with one issue. The divs will increase in size with the main column, but will not decrease. I’m assuming it’s my spaghetti code, but I think it’s getting close. Any suggestions on how to fix responsiveness in both ways? So that the divs can get shorter as well as taller?

Update 2:

I cleaned up the code a little and added the divs for the third column. Probably still horribly coded so any help is appreciated.

window.onload = function() {
var h = document.getElementById("main").offsetHeight;
document.getElementById("side").style.height = h/2 + "px";
document.getElementById("side2").style.height = h/2 + "px";
document.getElementById("side3").style.height = h/2 + "px";
document.getElementById("side4").style.height = h/2 + "px";
}

window.onresize = function() {
var h = document.getElementById("main").offsetHeight;
document.getElementById("side").style.height = h/2 + "px";
document.getElementById("side2").style.height = h/2 + "px";
document.getElementById("side3").style.height = h/2 + "px";
document.getElementById("side4").style.height = h/2 + "px";
}

Result:

[Rad]

Hi there,

Is there a live URL so I could see it in action? The code should be fine, it could be with jQuery too, but this version is more lighter and should be okay.

Thanks!

[ADS Media]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! You can break down your down and make use of this code:

(function($){
  $(window).on('load resize', function(){
  	var h = document.getElementById("main").offsetHeight;
	$("#side").style.height = h/2 + "px";
	$("#side2").style.height = h/2 + "px";
	$("#side3").style.height = h/2 + "px";
	$("#side4").style.height = h/2 + "px";
  });
})(jQuery);

Hope this helps.

[Author]

Posts