Survey Form Roast me!

Code Feedback
2

Hello Elijah,

Just checked your work.

I think the style and design looks good, except the text over the banne(image), I suggest you add a contrasted color as outline(text-shadow) to make it easier to read. Also make it a little larger. And since it’s about the fashion, so let’s have a fancy shadow, why not?!
My suggestion:

image
image799×384 107 KB

The css for title(h1) tag:

#title {
    margin: 0px;
    text-shadow: 0px 2px 4px #8BC34A, 0px -2px 4px #2196F3;
}

And css for subtitle:

#description {
    font-size: 1.5em;
    font-style: italic;
    text-shadow: 0px 2px 4px #00BCD4, 0px -2px 4px #FFEB3B;
}

Go for any color(kep it sync with otehr component colours like button) and shadow amount you like, but just add text-shadow to make a contrast with bg image to make it easier to read.

About the layout, Opps! it’s broken for mobile, check:

image
image347×879 13 KB

I think you used too many media queries, if you code the layout perfectly, so you will need one media query for mobile I think, but it also depends on page context too.
Also remember when you go for a media query that between two sizes, you should specify both min and max value, for example, following code(your code) could make issues:

@media (max-width: 620px) {
  #container {
    width: 320px;
  }
}

@media(max-width: 520px) {
  #background-image {
    background:none;
  }
}

This is better you set min size for a media query when another query could handle that size, so the fix could be like:

@media (max-width: 620px and min-width:519px) {
  #container {
    width: 320px;
  }
}

@media(max-width: 520px and min-width:459px) {
  #background-image {
    background:none;
  }
}

Your checkbox button come with broken label tags, All label tags refer to first checkbox, please fix, even label for textarea is linked to first checkbox.

If you fix the layout, it will be great.

Maybe reading this survey form challenge walkthrough article could help you about the layout Elijah, I suggest a quick read about the layout and template sections.

Keep going on great work, happy coding.

1 Like