DEV Community

loading...

Answering: How to adjust the 4th image column to make it a responsive image gallery

Faris Han
I'm working as a Front-End Web Developer. Currently interested in Vue.js and HTML5 game engine development.
・1 min read

So, somebody asked about CSS flex-based image gallery.

He want to make a responsive image gallery with CSS' flex. Four columns on desktop and three columns around the tablet viewport.

I think the problem is in his HTML structure. So, I restructure it.

Check my answer below and please correct me if I'm wrong, or help him with better and clean-code solutions, maybe?

First of all, I think the HTML code is wrong, because you wrap four photos in a section and then want to 'kick out' one of the photos. They supposed to be divided to two or one, not three.

And the class naming system is not good enough (How…

Discussion (0)