![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: blog post, equal height
-
AuthorPosts
-
May 16, 2017 at 1:18 pm #793898
Is it possible to make the columns in Blog Posts / Grid Layout equal height like normal columns? I have 3 blog grid columns with colored background and I’d like to make all the colored columns same height. Currently I have done this with fixed pixel height, but that’s not a very good solution.
May 16, 2017 at 5:41 pm #794172Hey teme,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaMay 16, 2017 at 10:58 pm #794523See private content.
-
This reply was modified 7 years, 3 months ago by
teme.
May 16, 2017 at 11:08 pm #794529Hi,
You can try adding the following to quick css:
article.slide-entry.flex_column.post-entry{ min-height:450px!important; }
Let me know if this works
Best regards,
Jordan ShannonMay 16, 2017 at 11:23 pm #794537It works, but as I said, I don’t want a fixed pixel height. I’d like these columns to function as the standard Enfold columns with equal height based on the largest column.
May 17, 2017 at 2:06 am #794563Hi,
Unfortunately there is no fluid solution, that could be achieved via css here in the forum due to the time and complexity it would take to achieve. Our normal recommended solution for this is setting min-height, but for further customization of the theme we do offer freelance services.
Best regards,
Jordan ShannonSeptember 14, 2018 at 10:34 am #1009848This will do the trick if somebody need it
<style type=”text/css”>
.slide-image {
overflow: hidden;
position: relative;
}
.slide-image img {
position: relative;
margin: -50% auto;
width: 100%;
height:auto;
vertical-align:middle;
}
.slide-image {
display:block;
height:200px;
line-height:200px;
overflow:hidden;
}
</style>-
This reply was modified 5 years, 12 months ago by
MarcusEls.
September 15, 2018 at 7:35 am #1010006March 7, 2020 at 2:24 am #1191047Hi all,
I know this thread is a bit old now, but for those still looking for a solution to this I used flex. In this example I wanted a specific colour behind the blog post excerpt.1. Give your blogposts element a css class of “news” in developer settings of the element.
2. Add this to your quick css:.news .slide-entry-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; } .news .slide-entry { flex: 1; background-color:#ebebeb; }
March 7, 2020 at 8:24 am #1191075Hey Wade,
Thank you for sharing a solution that may help other users!
Best regards,
Jordan ShannonJune 18, 2020 at 2:28 am #1223560certainly helped me – thank you!
actually, while i’m here – how about vertical alignment in those columns?
is there a way to vertically align (bottom) the .read-more-link ?
Jason-
This reply was modified 4 years, 2 months ago by
Jason.
June 19, 2020 at 6:53 pm #1224126Hi Jason,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaJune 22, 2020 at 1:05 am #1224456This reply has been marked as private.June 24, 2020 at 1:22 pm #1225176Hi Jason,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen (min-width: 768px) and (max-width: 1023px) { #top #after_section_2 .avia-content-slider .slide-entry-title { min-height: 75px; } } @media only screen and (min-width:1024px) { #top #after_section_2 .avia-content-slider .slide-entry-title { min-height: 52px; } }
If you need further assistance please let us know.
Best regards,
Victoria -
This reply was modified 7 years, 3 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.