Jump to content

Image gallery with different image heights: Removing the gaps between


lenato
 Share

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. ❤️

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...