issue with form
there is some issue with the form idk what, i've been starting at the code for a literal hour and couldn't find anything wrong with it, maybe yall can help me pinpoint the problem. i ideally want it to look like the attached image. Thanks!
link: https://codepen.io/staticoly/pen/KKJGJZQ
7 Replies
does this fix your issue?
I’m not understanding why you have the second input wrapped in a div.sticky and have the input positioned absolute within it? If you want input one and input two to be even and on the same row , take away the sticky div and just give both inputs a width of 100% with a gap between.
I would actually use grid not flex for this if you want the two inputs on the top row and the email on the second row.
grid-template-columns: 1fr 1fr; then give the email input a grid-row: 2; grid-column: 1 / -1; grid-gap: 1em
Then you don’t have to set widths at all. Your first name input has a width of 47%, the sticky div has a width of 53%, then second name input is 90% of that. Your reference photo has the first two inputs as splitting the space.
Just as an aside, I would also recommend not using id selectors for styling. They are way too difficult to override. Just throw a class on it too and use that if you need to. Although in this case you could just use input[name=name] for both or input[type=text] . Then input[name=email] or input[type=email] for email . Or even input[id=name2] by referencing the attribute without raising the specificity to an id.yes it does. god bless
i'm really not that familiar but i think that would also work. thanks alot!
I would use grid for this type of layout. It's easier
i will use grid from now on if it's better then, thanks btw
It's a tool, and this is a good use for it. It's not the only tool though. Learn all of them and pick whichever one you want for each different case
Both flex and grid are useful. But for different things. You should not use grid for everything. Sometimes you should use grid and sometimes you should use flexbox, it depends on what you make really. But for example if you make a horizontal navbar. I would definitely go with flexbox.