[christian@idehus.netParticipant]

Hi..

I’m using the masonry grid for the blog and portfolio. But I would like to present the blocks with equal height – despite the amount of text that’s beeing displayed. My client doesn’t like the way they differ in sizes. I try to explain to them that it has to be that way because of the responsive layout, and functionality on different screen sizes. But they are hard to convince.

You can see the pages here;
http://reflecto.no/newsite/nyheter/
http://reflecto.no/newsite/aktuelle-stillinger/

The same goes for this page;
http://reflecto.no/newsite/kontakt/
Is it possible to have the same height on the blocks presenting the people?

Hope for a positive answer 😉

Best regards Christian.

[Paul RModerator]

Hi Christian,

You can add this under Custom > CSS in the Customizer.

.blog article .entry-wrap {
    min-height:700px;
} 

.page-template-template-layout-portfolio .x-iso-container-portfolio .entry-wrap {
    min-height: 500px;
}

.page-id-341 .x-promo {
    min-height: 780px;
}

You may change 700px,500px and 780px to achieve your desired result.

Hope that helps.

[christian@idehus.netParticipant]

Hi – thanks for your reply!

But what if I dont want this for smaller screen-sizes? Like mobile-phones? Could you please provide me with the css?

Regards Christian.

[Rue NelModerator]

Hello There,

If you only want to apply it on medium & larger screens and not on mobile screens, please update the code using this instead:

@media(min-width: 980px){
  .blog article .entry-wrap {
    min-height:700px;
  } 

  .page-template-template-layout-portfolio .x-iso-container-portfolio .entry-wrap {
    min-height: 500px;
  }

  .page-id-341 .x-promo {
    min-height: 780px;
  }
}

We would loved to know if this has work for you. Thank you.

[christian@idehus.netParticipant]

Thanks – this works fine 🙂

Regards Christian.

[ThaiModerator]

You’re most welcome 🙂

If you need anything else, please let us know.

[Author]

Posts