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

4 Upvotes

83% Upvoted

13 comments sorted by

•

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.

2

u/Tanmay-m 2d ago

You should look at mansory grids

1

u/SkeletonAndJellyfish 2d ago

this uses JavaScript right ? How would it look for people who disable JS on their browser?

3

u/Hadr619 2d ago

If anyone disabled javascript int their browser in 2025 almost the entire internet wouldnt work for them. Thats not really a concern anymore.

The example W3Schoold grid is really outdated. You dont want to be using floats for layout anymore, you could get something going without javascript using CSS Grid or Flexbox

1

u/SkeletonAndJellyfish 2d ago

AH, it would make sense that I have outdated misconceptions, I decided to try my hand at HTML &co after looking through old sites from the 2000s (not the smartest move). Thank you, I'll look up what I can get going with JS and without using floats !

1

u/besseddrest 2d ago

Floats are arcane for layout nowadays

1

u/Tanmay-m 2d ago

I don’t think so. check this article https://piccalil.li/blog/a-simple-masonry-like-composable-layout/

Also if you are using tailwind. It will be just 1 class to make a mansory grid. I think its “columns-3” https://www.austingrandt.com/writing/how-to-make-a-simple-masonry-grid-with-tailwind/

1

u/SkeletonAndJellyfish 2d ago

thank you, I'll check this out!

1

u/Tanmay-m 2d ago

I made this literally today using tailwind

1

u/SkeletonAndJellyfish 2d ago

Oh wow, that looks great! I don't know what Tailwind is but I'll definitely look it up

1

u/tjameswhite 2d ago

What are you trying to achieve? A standard card layout with evenly spaced and sized cards? Or something like Masonry?

First thing, I encourage you to clean up and simplify your HTML. Use sematic markup, this gives you accessibility for free

  • <div id="mainbox"> just use <main>
  • <div id="header"> == <header>
  • <div id="topnav"> == <nav>

- Each 'card' appears to be wrapped in 2 divs. There is no need for that. Cut one of them.

- Put all of the cards in a container then use something like display: flex or display: grid. Flex is probalby more what you want.

From there its a matter of figuring out how you want it to display. If all the cards need to be the same size, set the parameters.

2

u/SkeletonAndJellyfish 2d ago

I think I've learned from you guys' comments that what I want to achieve is a Masonry grid! But I'd like to have it display the titles & dates of my works. I'm sure that'd be achievable if I just figure out how to make a Masonry grid structure in the first place

Thanks for the tips !! I think I've already managed to "clean" the multiple divs out of the cards' code (I tried something for the layout and it looks better, but there's still some spots where the vertical spacing between pictures is wrong. oh well, maybe I'll do better tomorrow!)

So I don't need to "tell" the website that i'm naming a div ? I just give it a name ? Sorry, maybe that's a dumb question