Hi Could someone kindly check my work on Test your skills: Styling basics?
Thank you very much!
My work
Test page
Hi Could someone kindly check my work on Test your skills: Styling basics?
Thank you very much!
My work
Test page
Hello @Risa
That’s a nicely styled form. Well done!
From a technical perspective you used a single-column grid for the <ul>
and in every cell a single-row grid. I see two possibilities to make this simpler:
<ul>
.<li>
s, set the labels to a certain width (to align them) and ditch the Grid for the <ul>
.I hope that gets you some ideas.
Michael
Hi @mikoMK
Thank you for your feedback!
Now I feel like using flexbox for <li>
s and setting labels’ width is the simplest way for this test!
I actually tried setting a multi-column grid for the <ul>
first, but I couldn’t position the labels and inputs/select as I wanted so I made a subgrid.
I wanted to position all the labels to 1/2 column, and all the inputs and select to 2/3 column, but it turned out this way.
Is this because label, input, and select are not direct children of <li>
?
Is there any way I can manipulate grandchildren elements’ positions in a grid?
Yeah, that’s a problem. All items we want to place into the grid need to be direct children. So this would need changing the HTML.
Since the exercise is about styling the form. It’s probably best to use Flexbox for the rows and keep the HTML as it is.
Hi @mikoMK,
I see! I 100% agree it’s the best solution to use flexbox for this task. The code became much simpler this way.
Thank you so much!