Im having issues with placement. I would like the text, text box and submit button to be center aligned. I am also having issues with getting the background of the survey form to surround the actual form uniformly. I also can’t seem to get the submit button to center. Im just at a loss right now and i’m sure the solutions are simple but please help.
(it does pass all the requirements but the styling and placement is awful and I can’t figure out the solutions)
https://codepen.io/ZMoberg/pen/vYLLXev
Thank you in advance
I know it’s a mess, I’m just at a loss.
1 Like
Hello,
Good job passing all of those tests. They’ll trip you up from time to time. I’ve also spent hours looking at code getting myself more and more confused, so don’t beat yourself up to hard about it.
The background looks like it’s rendering correctly on the page. It looks like the form is centered correctly over the background. Regarding centering, try margin: auto for the submit button and justify-content: center for containers.
Another thing you might want to revisit is your use of <br>'s. When I first started I was called out on it and I’ve gotten better because of it. You should try your hardest to change the formatting via CSS opposed to using breaks in HTML.
Also, some of your CSS code can be consolidated such as…
input[type=number]{
border-radius: 5px;
width: 400px;
height: 30px;
}
#dropdown{
border-radius: 5px;
width: 400px;
height: 30px;
}
Since the rules are all the same you could combine the rule like I have below. It will be easier to review your code, keep changes consistent and help with debugging in the future.
input[type=number], #dropdown {
border-radius: 5px;
width: 400px;
height: 30px;
}
You also have some empty CSS rules which should be deleted.
1 Like
Thank you so much for the response! I applied what you said and it worked perfectly, thank you. I am still wanting to close the surrounding opac grey border around the survey so more of the background-image shows on each side but am having problems manipulating the container size. When I adjust the margin-left / margin-right the button and text field mis-align…
I updated and saved my pen with the suggested changes, would you guys mind taking and look and telling me what you think? I know I still need to work on placement without the line breaks, I knew it wasn’t proper when I was doing it but frustration lead me to do it lol.
I definitely need to address the lack of responsiveness too.
https://codepen.io/ZMoberg/pen/vYLLXev
Keep at it! You will get it with time. Just don’t give up when you get frustrated. If you really get bent out of shape, save your code and come back to it the next day. Sometimes I’ve found myself figuring out issues that stumped me while washing the dishes or doing something menial. Sometimes we just need a break to get our juices flowing again.
*************With that being said let me try to help **************************************
Good work on improving your code. It’s coming together. If you want to have more control over the size of the form I would remove the fixed margins of 150px you have and replace them with a line for width (and set it to a % of a proportion of the vw ) and changing the margin to auto again. Doing this will help tremendously when you make the page responsive. It’s much easier to style responsively when things don’t have fixed values.
The next thing you probably want to do is update your .edit declarations. Set the width to auto so it will inherit the size of the container and will not float outside of it. And finally you’ll probably want to reduce the sizing of the margin.
Re: the breaks. Try updating your label rule to display:block instead of flex and you can then delete align-items: center.
Last thing, stylistically, I would use padding in the .edit declaration to add a little space between the text and the end of the form and I would probably set the with of the text boxes, selections, etc. equal to the width in .edit so the questions look uniform.
1 Like