I can’t seem to get all the columns to the correct height. I tried using height: 440px ; to set all the columns to 1 set height, but, in doing so, everything inside the column started to stack up when you changed to a smaller device and it looked terrible.
Hello There,
Please check this guide: https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272
Hope this helps.
Thanks Lely, the columns are now equal in height! If I shorten the text in a column the button at the bottom seems to rise. How can I make it stay at the bottom?
Hi again,
Try adding the following code in your Customizer:
.x-column.x-1-3 .my-column-button {
position: absolute;
bottom: 10px;
left: calc(50% - 47px);
}
.x-column.x-1-3 {
position: relative;
}
Let us know how this goes!
Thanks for the response, Babeel. I implemented your suggested code but our buttons seem to hover over the text paragraphs. I spent some time exploring the web but I couldn’t come up with a working solution. What’s involved with moving the column down so that the buttons don’t overlap anything?
Hello @aa2zz6,
In previous code please add following CSS:
.x-column.x-1-3 {position: relative; min-height: 435px;}
Thanks.
Thanks for the reply. That did the job but now when I access my website on a smaller device the columns are stacked and the text is now really weird. I feel like I keep adding stuff to the css without understand what’s being affected and such. I’ll post my CSS below? Before it seemed like it was working properly.
For some reason the 2 images below isn’t showing everything which is where I’m having issues with. Let me know if I’ll need to upload them again. Thanks
.my-first-section{
height: 500px;
}
.my-column {
border: 1px solid white;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
margin-top: -85px;
padding: 6px;
}
@media (max-width: 1199px){
.my-column {
margin-top: -110px;
}
}
@media (max-width: 979px){
.my-column {
margin-top: -55px;
}
}
@media (max-width: 767px){
.my-column {
margin-top: -85px;
//* For got to add semicolon *//
margin-bottom: 100px;
}
}
.x-column .p-column-style {
padding: 0 40px;
}
.x-column h6 {
margin-top: -80px !important;
text-transform: none !important;
}
.x-column .p-column-style p {
margin-top: -80px !important;
text-transform: none !important;
color: black;
padding-bottom: 10px;
}
.x-img {
text-align: center;
display: inline-block;
width: 10em;
height: 4.5em;
border: 0px solid;
font-size: 2.5em;
line-height: 4.75em;
color: #02aed6;
text-align: middle;
}
.my-column:hover img {
opacity: 0.5;
}
.my-column:hover h6{
text-decoration:underline;
}
/* Original Color #B8B8BA */
.my-headline{
margin: 0px;
padding: 10px;
background-color: #007EC3;
}
.entry-content .companyinfo p {
line-height: 1.55;
Padding-left: 10em;
Padding-right: 10em;
color:black;
font-size: 90%;
}
.x-column.x-1-3 .my-column-button {
position: absolute;
bottom: 10px;
left: calc(50% - 55px);
padding: 0.5em;
background-color: #007EC3;
}
.x-column.x-1-3 {
position: relative;
}
.x-column.x-1-3 {position: relative; min-height: 435px;}Hello There,
You will need to remove this code block:
@media (max-width: 767px){
.my-column {
margin-top:-85px;
margin-bottom:100px;
}
}
.x-column.x-1-3 .my-column-button {
position:absolute;
bottom:10px;
left:calc(50%-55px);
background-color:#007EC3;
padding:.5em;
}
And replace it with this:
@media (max-width: 767px){
.my-column {
margin-top:-85px;
margin-bottom:100px;
height: auto !important;
}
}
@media(min-width: 768px){
.x-column.x-1-3 .my-column-button {
position:absolute;
bottom:10px;
left:calc(50%-55px);
background-color:#007EC3;
padding:.5em;
}
}
Hope this helps. Kindly let us know.
Thanks you, RueNel. The buttons are working correctly. When we start to add text it seems that the text goes underneath the button and column. Is there a way to move the column down in order to keep the text above the buttons?
.
Hi there,
You will have to add bottom padding to your column, and that padding should be equal to your buttons height. Example,
@media (max-width: 767px){
.my-column {
margin-top:-85px;
margin-bottom:100px;
height: auto !important;
padding-bottom: 50px;
}
}
Hope this helps.
Hello Rad, I tried adding padding-bottom for the various @media’s and nothing seems to happen or change. Am I doing something wrong?
Hi there,
Please note that what you are trying to achieve is not available out of the box and falls beyond the scope of our support. We could however give you some suggestions to get you started but might require some some tweaking on your end based on your setup.
Firstly, settings a page element with absolute attribute is quite tricky although it would come in handy if you want to place something to a specific position. You can read more about it here.
Based on your setup, what I can suggest is instead of setting a height to the columns, you can instead tweaked the JS code here to locate the text element with the most text (longest) then set the rest of the text boxes to that length. This will allow the text areas to be equal, pushing the button to the bottom part and also making the columns equal since the elements inside them now have the same height.
If you do that, the buttons might appear to stick so close to the text and the bottom edge, so you can simple add a CSS code to add a top and button margin to the buttons with the class my-column-button.
If you follow the steps above, you should be able to have this output, for desktop:
Please note that using the snippet linked earlier in the response of this thread will set a specific height to the element and column which will cause an issue when you try to change the width of the device without refreshing the page because it sets a specific height to a certain block where the page is initially load. What you can do it to use the resize function to detect if the device width has changed so the height of the element will resize accordingly.
Hope this will help you get started.
I was able to figure it out!
The margin-bottom fixed the spacing between the text and the button.
.x-column .p-column-style {
padding: 0 40px;
margin-bottom: 70px;
}
To make the columns the same size you need to place the following java code in the Customize > Custom > Edit Global javascript… For whatever reason java code in the page don’t work at all
jQuery(document).ready(function($) {
var max = 0;
$(".x-section .x-column").each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(".x-section .x-column").css('height', max);
});Hi,
is it possible do filter specific columns not to apply the js code?
Thx in advance
Hi @loewenmilch,
Thanks for writing around! I’m not sure what you mean by ‘filter specific columns’ did you mean to leave out some columns from the script? If yes then you can give the columns a same class for example same-height-column and apply the JS code like this:
jQuery(document).ready(function($) {
var max = 0;
$(".x-section .same-height-column").each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(".x-section .same-height-column").css('height', max);
});
Hope this helps!
Hi Nabeel,
yes, like this.
Is it possible to revert this function like not to take the columns with this class?
Like: if ( !$(this). …
I think this would be more practicable.
Thanks in advance.
Hi again,
That might not be possible using the above script. You should give the class to only those columns where you need this functionality and then use above script. As you can see, this requires custom coding. This isn’t a feature offered in Cornerstone out of the box. What we gave serves only as a guide. Further improvements to it and issues arising from the use of it would fall outside the scope of our support as it is not a part of the theme.
We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.
Thank you for your understanding.
Is there a code like this also available for PRO?
Although I don’t have Pro, I would imagine you could implement this with the custom css.