I tried to follow info you had posted but I think I’m confused. The second section on this page has 8 columns, 4 per row. I want them all to be the same height regardless of content (I guess that means whatever has the most content and is the longest make the rest the same height). I know you have already figured this out but I’m lost.
1 Like
Hello Lance,
I have edited your page and in your “Benefits” section settings particularly the “Customize” tab, I inserted a custom equal-height class. And in the custom css section of the page, I added this:
@media (min-width: 768px) {
.equal-height .x-container {
display: flex;
}
}
Please check your site now.
Thank you so much! I have another question about this section - you previously gave me some CSS that would make 4 columns become 2 at the second smallest breakpoint, which I want to do, going down to one column in the smallest breakpoint. I tried using the following which worked in the footer, but doesn’t seem to work when I put it in the row custom class. Also, can you just add multiple classes in a call box in the customize area of an element? Thank you…
@media (min-width: 481px) and (max-width: 767px) {
.stay-inline .x-column .x-sm {
float: left;
width: 48%;
margin-right: 4%;
}
.stay-inline .x-column .x-sm:last-child {
margin-right: 0;
}
}
Hi Lance,
May I know which section?
The footer doesn’t use columns so that CSS isn’t gonna work, plus the sections in the content uses flex styling instead of that CSS. And that CSS is incorrect, there should be no space between .x-column and .x-sm.
Would you mind providing the URL where it was implemented and working? I just like to compare, or is it just really your site’s footer (footer builder)?
Thanks!
I’m sorry I may be confusing the issue. That css might be left over from something else as the footer is perfect. Basically in the section second from the top with the 8 boxes - 2 rows of 4, I want them to break into 2 wide at the second to smallest breakpoint and 1 wide at the smallest breakpoint.
Hi again,
Thank you for the clarification, try adding the following code in the Theme Options > CSS:
@media screen and (max-width: 767px) {
.flex-box .x-column.x-sm {
width: 48%;
margin-right: 4%
}
.flex-box .x-column.x-sm:nth-child(2n) {
margin-right: 0;
}
}
@media screen and (max-width: 480px) {
.flex-box .x-column.x-sm {
width: 100%;
margin-right: 0;
}
}
Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!
I thought it was perfect, but I just noticed that on an iPhone 6+ in landscape mode it looks like the attached, I thought it would give me the 2 wide there but not sure what it’s doing?
I also just looked at it in Safari rather than Chrome where I had been working and it looked like the attached:
Hello Lance,
Please remove the flex-box custom class in your row settings > Customize tab or simply remove this css:
.flex-box {
display: flex;
flex-flow: wrap;
}
Please let us know how it goes.
It doesn’t seem to be working. The columns all seem to be the same height, which is great, but the columns aren’t breaking into 2 at the second to smallest break point. Let me see if I’m doing what you have instructed correctly.
In the benefits section custom area I have the class “equal-height” and in the page css I have:
@media (min-width: 768px) {
.equal-height .x-container {
display: flex;
}
}
Which makes the columns the same height. (will this work if I put that css in the theme options css or does it need to stay in the page css?)
Then in the theme options css I have in order to make the 2 column break points at the second smallest breakpoint:
@media screen and (max-width: 767px) {
.flex-box .x-column.x-sm {
width: 48%;
margin-right: 4%
}
.flex-box .x-column.x-sm:nth-child(2n) {
margin-right: 0;
}
}
@media screen and (max-width: 480px) {
.flex-box .x-column.x-sm {
width: 100%;
margin-right: 0;
}
}
And I have no custom class in the row custom settings. Additionally, by changing the css I have lost the 4% margin below each of the columns.
Hello Lance,
I went ahead and edited the page.
I removed the custom css in the theme options > custom css section.
I added this code in Cornerstone’s custom css instead:
@media (min-width: 768px) {
.equal-height .x-container {
display: flex;
margin-bottom: 4%;
}
}
@media screen and (max-width: 767px) {
.stay-inline .x-column.x-sm {
float: left;
width: 48%;
margin-bottom: 4%;
margin-right: 4%;
}
.stay-inline .x-column.x-sm:nth-child(2n) {
margin-right: 0;
}
}
@media screen and (max-width: 480px) {
.stay-inline .x-column.x-sm {
width: 100%;
margin-right: 0;
}
}
To make it happen, I added custom equal-height class to the section and stay-inline to the row containers of the columns.
Please check your site now.
I looked and the stay-inline wasn’t in the row custom class, so I added it. It all seems to be working great, but when you squeeze the screen to 2 columns the equal height goes away, see attached.
Hello Lance,
I went ahead and edited the page again. I removed the custom css for the equal columns and opted a custom JS code method in having an equal column height. I used this custom JS code instead:
(function($){
function equalHeight(){
var max = 0;
$(".equal-height .x-column").css('height', 'auto');
$(".equal-height .x-column").each(function(index, el) {
if( $(this).outerHeight() > max ){
max = $(this).outerHeight();
}
});
$(".equal-height .x-column").css('height', max);
}
$(window).on('load resize', function(){
equalHeight();
});
})(jQuery);
Please check your site now.
The javascript didn’t appear in the JS area of the theme options or the page - I went back and copied and pasted your JS into the theme JS area and it seems to be working! The only other issue is that the column height seems to be gigantic when it moves to the 2 wide and 1 wide breakpoints. Shouldn’t they all be the same size, based on the tallest content? Thank you so much!
Hi Lance,
Yes you’re right about the same height of the columns based on the tallest content. I checked your site and the above script seems to be working as expected. Please clear all caches including your browser’s cache and test the page again.
Let us know how this goes!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.