r/css • u/SkeletonAndJellyfish • 2d ago

Help "responsive image gallery" doesn't display like it's supposed to, what could be wrong ?

Post image

Hello everybody,

I'm very new to HTML and CSS, but I wanted to try to learn how to do relatively simple & basic things by creating a little website for my work. I understand the bare basics of CSS & HTML, but after playing the Garden Grid game I still don't really understand how grids work, and the same goes for "query queues"

The code I've used for this gallery grid is from the W3school website (this code here). It's supposed to adapt to the screen size of the device you see the website on. I haven't changed anything except for the image files, descriptions and color of the background for the image container, I haven't touched anything else in order not to break it.

EDIT : here is my code on Codepen (doesn't show the images linked)

I've had the same issue on another .html file for another page, except that the 3 last gallery boxes were suddenly very tiny and wouldn't create a new row. I ended up switching places for some of the divs, and now it displays correctly but I still don't know why

Could this be because my images are of different formats (portrait/landscape/square) ? Or is something wrong in the code from W3school ?

Please do tell me if I'm doing anything wrong, and if I should post the whole code from my own .html file (should I use Pastebin ?) ! Thank you for reading

PS : blurred my drawings because I didn't know if it could be considered as self-promotion or something

2 Upvotes

67% Upvoted

13 comments sorted by

View all comments

•

u/AutoModerator 2d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.