Docs

[pdopchev]

Hi guys,

I have been trying to figure out the width and height settings of the essential grid when using a masonry grid. Actually even when using a leveled grid the images are still zoomed in and pixelated. Is there a way to set those properties from the menu? It seems like the grid blows up the images – makes them way larger than original size (45x450px).

Link: http://www.dopchevproductions.com/test/skis/

Thanks for your help!

[Lely]

Hi There,

Thanks for posting in. I can see that you have added max-width and height.

.esg-entry-media-wrapper, .esg-entry-cover {
    max-width: 22px; 
    max-height: 225px;
}

Other option you might want to try is adding this custom CSS but removing above max width and max height:

.esg-entry-media-wrapper, {
    text-align: center;
}
.esg-entry-media img {
    width: auto;
}

See attachement.

[pdopchev]

Thanks for the hint, Lely!

When I use the suggested css code the images are aligned to the left instead of being centered. By the way,

.esg-entry-media-wrapper, .esg-entry-cover {
max-width: 22px;
max-height: 225px;
}

seems to be messing the hover state of the grid – hover items show only partially behind the main image… So I am still looking for a solution.

[Lely]

Hi There,

Please update above CSS to this:

.esg-entry-media-wrapper {
    text-align: center;
}
.esg-entry-media img {
    width: auto;
}

The comma on this line cause syntax error :.esg-entry-media-wrapper, { that’s why it is centered. Error on my part. I am sorry for that.

Unfortunately, the hover issue is not clear to me. Would you mind clarifying so we can help you better?

[pdopchev]

Lely,

Thanks for the help! Didn’t notice that comma either… As far as the hover issue – it was happening when using:

.esg-entry-media-wrapper, .esg-entry-cover {
max-width: 22px;
max-height: 225px;
}

So it’s all good now!

Thanks again!

[Lely]

Glad that it is all working now.

Cheers!

[Author]

Posts