Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Flexing on my start page

KittenKatja

Well-Known Coder
I recently moved from using Stylus to inject stylesheets into websites, I go to very often, to make a personal HTML file.

In it, I made a div column inside is x amount of row divs, and inside are two more divs title and list and inside the list are a bunch of links.
I gave the first div {width: fit-content;display: flex;flex-direction: column;gap: 15px;}
The second div has {display: flex;}
The title div has {width: fit-content;font-size: 25px;min-width: 120px;}
The links inside the list div have {display: block;flex-direction: column;align-content: stretch;}
I gave the first div a stylized "border" that only appears when :not(:hover) and the row div a "border" when :hover.

Now to the questions...
  • Priority: High | How do I make the title as big as any other title in each row? My current solution is {min-width: 120px;}, but I don't wanna change it as I add longer titles.
  • Priority: High | How do I stretch the links to fill the open room? (replicate 2 rows to know what I mean)
  • Priority: Low | How do I make the "border" of the first div only disappear, when a row-div is hovered, not when the mouse is in the 15px gap?
  • Priority: Low | Is it possible to have an input field that is hooked up to google to flex on my start page? :laugh: (very unnecessary since I plan to get to it through the start page)
 
Apparently, I can't post my code for whatever reason.
I first tried iframe, then the error message dispensed into the console did no sense since it doesn't tell me what I have done wrong or what I can or can not do.
Then I used the </> code block (minus the iframe tags) and got the same error.
The community hub on how to post code is also not helpful, since it doesn't answer what this error message is. (2 hours gone for nothing q-q)
 
Hopefully, this can finally help me with the other high-priority question. https://codepen.io/KittenKatja/pen/KKyKLKJ
Here's the text I prepared for the post that would overwise have my code in:
Usually, this forum is notorious for "we don't code things for you." I wanted to see if that "rule" is bi-directional.
I forgot to ask, Priority: Low | When looking at the body, I saw that the margin aligns with the "column" at the top but not at the side. How do I fix this? Why does the user agent stylesheet have a margin for the body? Shouldn't it be something like padding? This does not appear in code pen.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom