Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 16, 2017 at 1:18 pm #793898
    teme

    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 #794172
    Victoria

    Hey teme,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    May 16, 2017 at 10:58 pm #794523
    teme

    See private content.

    • This reply was modified 7 years, 7 months ago by teme.
    May 16, 2017 at 11:08 pm #794529
    Jordan Shannon

    Hi,

    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 Shannon

    May 16, 2017 at 11:23 pm #794537
    teme

    It 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 #794563
    Jordan Shannon

    Hi,

    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 Shannon

    September 14, 2018 at 10:34 am #1009848
    MarcusEls

    This 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 6 years, 3 months ago by MarcusEls.
    September 15, 2018 at 7:35 am #1010006
    Rikard

    Hi MarcusEls,

    Thanks for sharing, much appreciated :-)

    Best regards,
    Rikard

    March 7, 2020 at 2:24 am #1191047
    wadetaylornz

    Hi 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 #1191075
    Jordan Shannon

    Hey Wade,

    Thank you for sharing a solution that may help other users!

    Best regards,
    Jordan Shannon

    June 18, 2020 at 2:28 am #1223560
    Jason

    certainly 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, 6 months ago by Jason.
    June 19, 2020 at 6:53 pm #1224126
    Victoria

    Hi Jason,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    June 22, 2020 at 1:05 am #1224456
    Jason
    This reply has been marked as private.
    June 24, 2020 at 1:22 pm #1225176
    Victoria

    Hi 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

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.