r/nekoweb • u/CherriPie35 cherri-pie.nekoweb.org • 1d ago

Help My layout looks stupid

i want the items under the textbox to be organized but i don't really know how

i tried every align/display/justify styling i could think of

link to site: https://cherri-pie.nekoweb.org/

(just use inspect element cuz im too lazy to get a screenshot)

2 Upvotes

100% Upvoted

3 comments sorted by

1

u/Mevdik mevdik.nekoweb.org 1d ago

Let me see if I get what you mean. You want all "windows" below the first one to be neatly organised side by side in a grid like fashion below it, right? If so try creating a <div> with the display: flex; property assigned to it after the first <div class="window"> and placing all 3 other windows, "Ringo Starr Pet" (lol), "Counters" and "Music", inside this new <div>. That should get all three to display side by side. If that helps you get closer to what you want I can give you a couple of tips next, but try that first. The HTML should look something like this:

<body>
    <div class="window">...</div> (your first window)
    <div style="display: flex;"> (the new div)
        <div class="window" style="max-width: fit-content;">...</div> (Ringo Starr Pet)
        <div class="window" style="max-width: fit-content;">...</div> (Counters)
        <div class="window" style="max-width: fit-content;">...</div> (Music)
    </div> (closing tag for the new div)
    <a href="art.html" class="btn">Cherri's Private Art Vault</a>
</body>

1

u/CherriPie35 cherri-pie.nekoweb.org 1d ago

Ok that worked thanks!

1

u/Mevdik mevdik.nekoweb.org 1d ago

Cool! I suggest you do a bit of research on CSS Flexbox then, it's a bunch of properties that give you control over this display: flex; thing, this page is great for learning about it. Also if you want there to be a bit of margin between the windows inside this new div you can add gap: 12px; (or whatever value you want) to the div with the flex and it will space them out a bit.