Jump to content
lenato

Image gallery with different image heights: Removing the gaps between

Recommended Posts

Hello,

hope you are all fine. 🎉

Currently I work with this script:
https://www.w3schools.com/howto/howto_js_portfolio_filter.asp

This is my state:
https://codepen.io/nicerboy/pen/QRrZQo
The problem is that gap between dfkjaslf.jpg and saada.jpg😭
There have to be images with different heights. The gaps should always be the same size.
I guess media queries are no option because of the resizable function (with that splitter in the middle).

I also tried it with a grid:
https://codepen.io/nicerboy/pen/MdGZEG
The images arrange correctly. But now there are vertical gaps. 🤔

Would be so thankful for help. ❤️

Share this post


Link to post
Share on other sites

IF you want equal height columns use ALL of my code (missed .row styling and you don't require float anymore). IF you want title/comment  to bottom edge of image remove margin-top: auto; as it forces the targetted elament to bottom OR adjust h4 default margins to a smaller margin.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...