Slider Revolution WP
09.27.2016
Masonry Grid Layout with Even Image Heights
Apply custom CSS to combine a Masonry Grid Layout
with Even Image Heights.
Normally when Masonry is used as the grid’s main layout option, the items will not always be perfectly symmetrical. Here’s an example:
In the above example, you can see that the image heights vary. This is normally how a Masonry Layout is displayed.
But if you’d like to make all the image heights even, you can add some Custom CSS to the grid.
1. From the plugin's main admin page, click "Edit Skin".
2. Next, open the "CSS Editor"
3. Finally, enter the following Custom CSS, and adjust the max-height values as needed.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* default max height */ /* this number should be the smallest image height used in your grid */ .esg-entry-media-wrapper, .esg-entry-cover { max-height: 120px; } .esg-cc { top: 0 !important; } /* 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; } } |
