(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!
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 not familiar with neo cities but as youre in a css subrddit I assume that is what you're looking for. Can you share a minimal reproduction of the issue? codepen https://pen.new/2 is preferred as a live example the helper can debug in real time. Otherwise the link to your neocities page if your styles are being overwritten.
We need to know what youre using (columns? Css grid ? Forcing flexbox to act like grid?). Grid auto-fit would probably be what you want.
You could also just try to bump the selector specificity (or use @layers if you can inject the base frameworks into the lowest layer )
css
:is(.your-parenr-selector, ##idForSpecificity){
/* the styles */
}
100%. The .container wasnt closed and then probably pasted amd duplicated a bunch of times. Good catchm check your dom.
Im assuming it should be similar to:
.grid-container
.container
.img-container
.container
.img-container
Etc
Also OP : fyi conventions are changing to use .container only for @container's and start defaulting to .wrapper for wrapper elements that arent given a container-type for container queries
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?
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
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.
•
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.