I need help with HTML projects tribute and survay form

I don’t understand how to re size the contents of the websites on smaller devices such as phones on my tribute page https://codepen.io/kirsandre/pen/arQBZG

The want to make the checkbox text match with the check boxes for my survay form
https://codepen.io/kirsandre/pen/xoKGOQ

i would also like to increase the visual appeal of these two sites so i would love some tips

thanks for your find cooparation

You can resize the web content as per the devices, by using @media queries. You can read about it in MDN.

@kirsandre I like your page. This is commentary for the first link you posted, the tribute page.

Here are some things you could change to improve the look of the website.

  1. Find a way to contain the width of the paragraph text so that it does not fill the width of the screen in desktop mode. In mobile view this is okay because space is limited.
  2. You can use text-align: justify to line up the words in the paragraph better.
  3. The background image is too low of a resolution because it is looking pixelated and fuzzy.
  4. The two paragraphs should have the same font weight.
  5. The paragraphs are a bit hard to read do to the busy background. You can add a div with transparency to increase the readability. Look up hlsa or rgba colors.
    Here is a link to a post I made that has information on media queries FCC Tribute Page - Feedback
    I strongly suggest doing mobile first media queries. It is easier to do in my opinion.
1 Like

thank you very much this was very helpful

For the tribute page, you did a great job, but the text shouldn’t be italic. It is really hard to see. maybe change the color to red, yellow, or white. And you should change the font to Avenir or Optima or Sans.
For the survey form, You should space things out better. It has a horizontal scroll, so in the link, instead of https://codepen.io/kirsandre/pen/xoKGOQ, change it to https://codepen.io/kirsandre/full/xoKGOQ and the whole browser will be filled. Actually, it is not “Survay form”. It is “Survey form”. The first two inputs should be a little more to the left or just centered. Why does the age value need to be over 15? what’s wrong with me (13) filling out the form?
Good luck, and Happy coding. :slightly_smiling_face::upside_down_face:

thanks for the feed back cood luck to you to