Odin challenge - signup form using only HTML + CSS - Stuck with positioning...
https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-sign-up-form
https://codepen.io/Laing91/pen/dyQzYJw
I've been rattling my brain over this for a day and I'm still no further on, so I guess it's time to ask for some help (sad times).
I think I did kinda ok up until the form, then I just got lost. I seem to encounter this issue a lot and preivously I just gave up, so I'm hoping to get this one sorted so I can learn from it finally.
First thing, the form needs to be 2 by 2:
I tried using <br> to do this, and it kinda works in my vscode, but in the codepen it doesn't reflect it obviously. However, I also need to have the text above each box, and I'm not really sure how I do that... I tried <br> again, but it didn't seem to solve it.
Secondly, the background on the form, it needs to be the entire width of the right-container, but I've noticed there's a big chunk of margin/padding from the main-container which is preventing my right-container from spreading to the edge of the page. I tried setting margin and padding to 0 on main but it hasn't changed anything. In the codepen I've removed the main container all-together, but it didn't fix anything.
Project: Sign-up Form | The Odin Project
The Odin Project empowers aspiring web developers to learn together for free
14 Replies
Is there a reason your right-container is nested inside the left-container?
Your first issue is that you are not closing the left container
Ah, sorry, that is basically what @jochemm pointed out
Wow how did I manage that... moment!
codepen is updated, so that fixed that issue, but opened another
Try adding display: flex to the body
is this more in the direciton you're looking? https://codepen.io/jochemm/pen/GRwvBJP
It is, however on both yours and mine I notice the background for the Odin text does not stick to the left-container, and it flows outside it at certain sizes
and if it's too wide, the form doesn't hit the end on the right, it leaves a gap
For the form you could use grid but I presume you are not allowed?
Either way you need to group your field labels and fields into their own element (div)
yeah, grouping would be better, my solution is finicky
Honestly, the challenge says to do it in flexbox, but if this is just teaching me bad practises, then I'm happy to try and re-do it in grid.
weirdly grid is the next part of the course
I'll see if I can make the layout from the project link using flex tomorrow, I need to head off now
That is because you have given it position flex but not given its parent element a position relative
So it is being positioned relative to the body with a width of 40%
Oh, hmm
I've added fieldset to the form atleast, i'll look at that now ^
Might have to tear it down and start again, feels very bloated again, I'm just throwing divs around hahaha
https://codepen.io/cbolson/pen/wvQqxaL
Based on what you had a few minutes ago.
Added positioning
Added containers for each form field + label
Added grid to display the form fields
I've just browsed a few solutions out of curiousity, and this one seems to be the cleanest. It doesn't look far away from what I had, which is weird (for the left image + text, anyway) https://codepen.io/Laing91/pen/qBQXyNx
oh that was quite simple with grid, I definitely over-thought that process