Masonry mixed grid with less images (4) but still good looking?

Question

Hey there,

Wanted to use the mixed masonry grid as you guys used in the 'Package-HTML/HTML/one-page/index.html', but only with the first four images. Unfortunately now the last image (wide) does not dynamically fit the height... (See attached image). I really struggle with a clean solution for this one. I used the same classes and containers than in the 'Package-HTML/HTML/one-page/index.html' page. So the structure is the same.

Can you please help me out?

Thanks in advance and best regards from Vienna!

SemiColonWeb · Accepted Answer

Hello,

We Really Apologize about the Inconveniences caused! According to the issue you are facing the Masonry Item's Image does not appears to be of the correct size which is why it does not adjust properly. Unfortunately, the Masonry Functionality does not adjust the size of the Images dynamically and you will need to manually resize the Image so that it can fit properly. Please use the Photoshop Software to resize your Image.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

yanc3k · Answer

fixed the attachment...

yanc3k · Answer

Hi,

thanks for your answer! Unfortunately that is not a solution, because the image then just fits for one viewport. I already tried that... It then fits on my retina display, but on a HD-Display the grid is already messed up.

Have you already implemented a masonry grid with only 4 images? Or can you help me with some front-end magic to solve this problem?

Thank you and best regards,

Yannick Treichel

Semicolon Web · Answer

Hello,

Apologies about the Inconveniences caused regarding this issue. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.