FCC Project: Survey Form @ Media Query

HTML-CSS
1

Put together this basic survey form and passing all tests. However, I need a little help with mobile optimization and media query. Specifically, I just want to shrink the width down of the entire project for phone screens. I have thrown quite a bit at it and cannot get anything to sort it out just yet. Might still be missing some basic CSS understanding with “Media Query”.

Thanks in advance.
M

https://codepen.io/mikethye/pen/eYgPWqr

2

@mikethye, you shouldn’t need a media query for a simple form like this.
Some things you can do;

  1. use relative units (percent, em, etc) rather than hard-coding pixels
  2. if you are going to hard code pixel units what about max-width versus width
3

I fixed it. Thank you @Roma

M

4

Glad to hear you were able to resolve it @mikethye.

I know you didn’t ask for a review but I did notice some things in your code that you should revisit;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    • For instance, click on the label “Toast” a couple of times and see what gets selected/unselected. (Same thing happens when clicking “home fries” and “pancakes”. You don’t want this)
    • Clicking the labels for any of the radio buttons does not toggle any of them.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • You have elements out of order. Anything the browser renders belongs in the body element. Rview this for an understanding of the HTML boilerplate tags.
  • As a suggestion switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.
  • You may also want to run your HTML code through the W3C validator.
    • This will help you address HTML syntax/coding errors.
5

@Roma

This was really helpful! Thank you for taking the time to review. I looked over everything you mentioned here. The radio and checkboxes seem to operate how I want them to. The radio selector allows the user to select one item (choose one beverage) and the checkboxes allow multiple items (add side items) with the ability to toggle on and off.

My code and syntax are hacked together. So, the “Oceanic Dark” theme and WSC validator are super helpful. My current plan is to complete all the projects in this module and then retake the entire html and css curriculum as I think it will make more sense the second time around. I will probably leave these projects alone for a time until I have a better grasp. Thanks again.

M

6

I’m not sure what you mean by this.
I’m also not sure if you understand what I was saying. User’s should also be able to toggle by clicking on the label, not the just the radio button or checkbox. This is what’s not working correctly. Reread what I wrote and tell me what part you don’t understand.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.