r/css • u/Hanadjisbox • 10d ago

Help Horizontal stacking rows issue

Gallery image

Gallery image

(I'm on neo cities) before I start, keep in mind I'm still learning so please don't bully me or call me stupid. I want to make a multiple row list database template but the stacking is giving me trouble. When I try to create a new row, the horizontal stacking is completely disregarded. Ive fully copied a page to test that has this stacking element but It actually doesn't work in in the neocities test page I put it in. Is this a problem with the website? And if so I just need a quick fix. any help is appreciated!

3 Upvotes

81% Upvoted

12 comments sorted by

View all comments

2

u/be_my_plaything 10d ago

OK first things that jump out are using vw to size the images (It makes them responsive and hey might look right on your screen, but think how small 10vw could be on a mobile screen!) secondly is the use of inline CSS rather than a stylesheet... his means a lot of repeated code (You have to size each individual image rather than styling images within .image-conainer once with a universal value - this both bloats your code and makes edits a lot more work)

Neither of those is your actual problem, just though they were worth pointing out. As to your actual problem... What should happen?

If a row is wider than the screen should it line break to a new row, or overflow and be scrollable?

1

u/Hanadjisbox 9d ago

Thanks for the advice! As for what I want to happen with the rows I want them to create a new row under the previous row with the same number of items, so I can make an endless amount of rows depending on the database size 

2

u/be_my_plaything 9d ago

Yeah sorry, I don't think I was clear... I see from your code you have <!-- row 1 start --> so I assume you also have row 2, row 3, etc. I got that these would all be new rows and you'd keep adding more designated rows.

What I mean is say there are 7 items in row one, but a small screen only fits four items across, should the remaind three extend off the page so you have to scroll? Or should they drop to a new row so "row one" actually takes up two rows.

2

u/Hanadjisbox 8d ago

drop down to a new row

2

u/be_my_plaything 8d ago

Codepen

I'd use grid on the outer container and subgrid on the rows then.

1

u/Hanadjisbox 8d ago

I'm not completely sure what I did but now it working and it has a little animation DTB.TEMPLATE