Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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.

    #794172

    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

    #794523

    See private content.

    • This reply was modified 4 years, 8 months ago by  teme.
    #794529

    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

    #794537

    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.

    #794563

    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

    #1009848

    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 3 years, 4 months ago by  MarcusEls.
    #1010006

    Hi MarcusEls,

    Thanks for sharing, much appreciated :-)

    Best regards,
    Rikard

    #1191047

    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;
    }
    #1191075

    Hey Wade,

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

    Best regards,
    Jordan Shannon

    #1223560

    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 1 year, 7 months ago by  Jason.
    #1224126

    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

    #1224456
    This reply has been marked as private.
    #1225176

    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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.