Survey Form Responsiveness Review

Code Feedback
1

I have been able to complete the Survey Form project but I need some more help with more responsiveness and some suggestions and advice.

For instance: I tried using the @media screen and ( ) Query but I don’t seem to understand that property much.

I tried getting the <h1> Royal Pug Survey </h1> to resize once the screen gets smaller on mobile devices but I failed at that.

responsiveness

PS: I added the <meta> directly in the codepen editor, the responsiveness was terrible even though I added all tags in the Settings -> HTML -> Stuff for <head> section.

I’d very much appreciate any tip, advice or suggestions to make my page look better and more responsive. Thanks in advance.

2

Hey! i just checked out your website and here are a few suggestions.

  1. you dont need to put anything in the head element since it is added in automatically by codepen.

  2. the main tag is a special tag which is used for accessibility purposes and should not contain anything that is not directly related to the dominant part of the webpage. If you want to learn more about that hen i suggest you to read this article.

  1. A webpage’s contrast ratio is a way to find out how easy or hard, content is to read on a webpage right now, due to the form element’s opacity being so low, it would be really hard for disabled users to use your site. Making a website accessible to all kinds of users is a developers responsibility.

  2. a media query works like an if else condition in programming. If the condition that you set in it true, then then the code nested in will run.

The general syntax is this

@media (some-condition){
  some code
}

the condition can be anything from a page’s width to its orientation or pixel density or if a person is using a phone.

in this case you wan the max-width property because it basically means that the code needs to work until the maximum width is reached. for example

h1{
  color: green;
}

@media (max-width: 540px){
  h1{
    color: red;
  }
}

the code inside the media query will make the color of the h1 element red until the maximum width is reached which in this case is 540px. After 540px the color will be green.

The min-width is the same, It says "Do not run this code until the size is atleast _____ "
so

h1{
  color: green;
}

@media (min-width: 540px){
  h1{
    color: red;
  }
}

so the above code will make the color red when the screen size is above 540px.

you need to add an “and” after this because it is a compound statement. because you are telling it the media type which is “screen” (yes, this means there are more than one media type, for example print for printers) and the screen size so it needs to be.

@media screen and (max-width: 400px){
/* Your code*/
}

Hope this helped! :slight_smile:

3

Thank you so much for the explanation will definitely visit the highlighted issues and will make the necessary changes.

I really did put in all the necessary tags and all but if I click on the inspect on the browser the responsiveness is all messed up I think that is because the dev tool can’t access the tags, also the project tester bundle is unavailable if not added in the head element in the codepen editor.

I actually styled the background in the main, I don’t know if that’s valid or considered dominant but I removed it as I read the article and I got more understanding of how to use the <main> tags

I fixed up the opacity to make it easier to read for persons with special needs. You can check it out and let me know what you think about it now.

I still need to study the @media query because I don’t have a full understanding of how to use it properly to get the desired output yet.

4

Your form looks good @teamie. Some things to revisit;

  • 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.
    • on a side note, the FCC test script would not work if placed in the head element. It needs to load after the HTML which it tests so it would appear before the closing body tag. Codepen is forgiving which is why it works here. (When you don’t use the head element in codepen you can place the test script at the top or bottom of the HTML editor.
  • Do not use fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
  • Change the cursor to a pointer when hovering over the submit button

On a side note, Latin is a dead language and may not be universally understood. Do not use. Also, e.g. is the correct abbreviation.

5

Thank you @Roma I already removed all the extra tags in the head and kept them in the boilerplate before now. The only script in the codepen editor is the test script and page title. Also, there are no body tags I removed them alongside the main tag.

So I tried changing the fixed dimension which I had on the elements to relative units and also changed the cursor to pointer.

Finally I added some CSS rules to adjust the screen (most especially h1 and description) on smaller devices:

@media screen and (max-width){
h1{
some codes
}
#description{
some codes
}
}

Do you think this is valid? I checked on a mobile device and it looked good but is this ethical?

6

well this is the correct syntax so yeahh it is

and by this i didnt mean you cant style the main tag. i just meant dont put anything unnecessary in the main tag such as navbars, sidebars or footers.

I checked out your website again and it looks pretty good. Good job on completing the challenge! :wink:

7

Nice job cleaning things up @teamie. Looks better.

I notice there’s a style element in the ‘Stuff for <head>’. Two things;

  1. that’s not needed there because all of your styling is external. That is, it’s all in the CSS editor
  2. the link to the font goes in the head element…like you have it. It would not be in the style element.
    Hope that makes sense.

Yes, your media query looks good and your form is responsive.

8

Thank you so much for your help.

I will keep this in mind. Once again thank you for nudging me on the right path.

9

Thank you so much for your assistance.

I was wondering if it was okay to place the @import css in the CSS editor but it worked the same. I will keep in mind not to make such mistakes again. The reason I added the @import css link in the head was because that was the instruction from the google font page for link and @import but I failed to recognized the <style> tags in the @import link. I will keep in mind not to make such mistakes again. Thank you so much :grinning_face_with_smiling_eyes:

10

I’m glad you were able to get a better understanding.

Happy coding!

1 Like
11

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