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

github logo ・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…

twitter logo DISCUSS
Classic DEV Post from Apr 21 '19

Planning a Real-World Web Application & Key Considerations(Part 1: Project Management)

This series of posts document a high-level process to use when planning a modern web application, from project organization, collaboration considerations and tooling choices during development, all the way through deployment and performance strategies.

Faris Hanugraha profile image
I'm working as a Front-End Web Developer. Currently interested in Vue.js and HTML5 game engine development.

Customize your DEV feed to keep up with the technologies you care about.

Get Started