Docs

[lukasjan]

Hello,

I’ ve been trying to align content boxes below thumbnail images with essential grid in this page (http://www.mhealth.lt/publikacijos-2/ password:health123)
I used this css in skin:
.esg-entry-media-wrapper, .esg-entry-cover {
max-height: 250px;
}

.esg-cc {
top: 0 !important;
}
It aligned thumbnails, but content boxes are not in line. Could you help me with CSS to align content boxes?

By the way, I am using masonry layout just because I need content boxes to be visible always, which is not allowed with even layout option on essential grid.

Thanks,

Lukas

[Rupok]

Hi Lukas,

Thanks for writing in! Kindly take off your custom codes and keep it default as the code breaking the layout and it’s kinda tough to understand. After removing custom code, clarify what you are trying to achieve. We’ll be happy to assist you if this is something achievable.

Cheers!

[lukasjan]

Hello,

I deleted CSS code and marked the area I want to have even layout in red color, it is essential grid.

Lukas

[Lely]

Hi Lukas,

Thanks for posting in.
Please try using Even layout instead of masonry.
Then check this documentation to make it always visible:https://www.themepunch.com/faq/show-skin-content-without-hover/

Hope this helps.

[lukasjan]

Hello,

Thanks for advice. I did try steps in documentation link, but it did not work, it works only for the content on thumbnail, it does not work on content, which is below thumbnail in my case text with excerpt. So then I read https://www.themepunch.com/faq/grid-content-only-shows-up-on-hover/, which says that you have to use masonry for content below thumbnail to be visible always. Eventually I tried this custom CSS, which worked, but only on fullscreen above 1200px https://www.themepunch.com/faq/masonry-grid-layout-with-even-image-heights/. On smaller screens misalignment appears. How do I make it to be even on all screens? I know that there is this additional code, but I don’t really know how it works :
/* Create additional media queries for different screen sizes */
/* and adjust the max-height for each depending on your grid */
@media screen and (max-width: 768px) {

.esg-entry-media-wrapper, .esg-entry-cover {
max-height: 100px;
}

}

Thanks!

[Paul R]

Hi,

You can try this code instead.

@media (max-width: 1200px) {
.esg-entry-media-wrapper, .esg-entry-cover {
      min-height: 500px;
}
}

It means when the screen reaches the width of 1200px, the wrapper will have a min height of 500px

You may change 500px to achieve your desired height.

Hope that helps.

[Author]

Posts