Survey Form Feedback Please

Hi there!

Here’s my survey form: https://codepen.io/Shangnt/pen/eKgEOv

I’ve deliberately added border lines for the rows (black borders) and the classes colLeft and colRight (blue borders) because I have a question regarding the spacing.

If you reduce the browser size to 680px and below, you’ll see that the blue borders extend on the right to the edge of the pink container. This is what I can’t figure out. How can I get the blue borders to align with the black borders? The left borders don’t have the same problem.

Another question I have is how can I position the pink container in the centre of the browser when the browser is 680px and below?

Any other feedback to help me improve the coding is very much appreciated.

Thanks!

Hi,
There a few things you need to consider when using CodePen.
The Doctype and head are already created for you. If you have a meta tag, it should placed in the html settings. You can open it by clicking on Settings at the top right next to your avatar.

When the settings module opens, click on HTML and place your meta tags at the bottom.

Also with your style and scripts. Place them in the proper CSS and JavaScript modules.
Take out every thing on your Pen html panel up to body and at the end if you closing body and html tags.

It is not necessary to have your browser resets in the CSS panel. I don’t know if it affects anything, but it doesn’t help.
– That’s just for working with CodePen.

I see what you are saying. Do you need a visible black border? I think it would look good just having the blue borders around the label and input fields.

2 Likes

It looks like you are calling the container properly, at 95% and margin auto.

But there may be a padding issue. Have you made the container padding 0 ?

1 Like

why blue border extend on the right is u set width 95% when browser is 680px while normal u set 45%.
if u match these two together, it isn’t extending anymore. So as container.
in case if u wanna set ur legend tag to justify when browser size is 400px

legend{
    max-width: 400px;
    text-align: justify;
  }
1 Like

Hi KoniKodes,
Thanks for taking the time to go through my code. I took your advice and placed the meta tags in the settings.
The black and blue borders were put there temporarily to show the problem. Like you said, it had something to do with the padding. I changed the padding settings plus added box-sizing border-box. Seemed to work now! :grinning:

Hi Kiowd,
Thanks for your reply! I appreciate the advice but in the end, I tried another approach. It looks better now though I think the overall layout still needs work… :smiley:

Great work! I like how it looks and feels now.

1 Like