Tell us what’s happening:
Finish my survey form, feedback is welcome. However, I need help in the horizontal scrolling bar. When I minimize the browser, the scrolling bar appears. I dont want to hide the scrolling bar, but how can I make the width fixed so that I can only minimize the browser to a certain width without triggering the horizontal scrolling bar? Thanks!
Very nice survey form, it’s a good basis. As your knowledge grows you will be able to add features to the form and turn it into a professional webpage.
That scroll bar appears because your form is not responsive yet. You can make it responsive by adding media queries (responsive webdesign principles part of the curriculum) and inside them you can decrease the width of your page, the font-sizes etc. These were not part of the criteria in this project but you will have to use them in the next and then all will become clear.
There are a few things I would add. To improve the accessibility of your page you could wrap the radios and checkboxes in a fieldset and replace the labels " How much do you think you should spend getting your nails done for each time? and Which aspects are you pleased with our service, please check all that applies by a legend. These elements were introduced in the applied accessibility part of the curriculum.
I would also remove the tags and apply padding and margins instead. are not meant to create space but for line endings. That way the space between elements can be the same everywhere and you can add a bit of space between the labels and the input elements. They are squeezed a little tightly.
Maybe find a nice background to jazz it up a little?
The rest is there you are using all the semantic tags, the for attribute is applied consistently, it’s a really good start. Just keep building.
Aside from the visual aesthetics I think your survey form is pretty neat. Although think you could improve your website by adding a background image. If you decide to do that then you will have to either make your form box transparent enough to see the image in the background.
Your page looks good @minhphanhvu. Some things to revisit;
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The link to the font goes in the box labeled ‘Stuff for <head>’
There are HTML coding errors you should be aware of and address.
Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
You’re seeing the horizontal scrollbar because you are setting widths to a pixel size. Once the screensize is below that size, the scrollbar appears. The easiest way to keep your page responsive is to use a percentage instead.