Tribute to Sergei Rachmaninoff

First project passed! Any criticism is welcome. I have a few specific things I had questions about as well:

  1. I’m not sure if I’m using ems and rems correctly.
  2. I was having trouble with media queries and it still isn’t working on my phone how I want, so any advice on that would be helpful.
  3. Is there a better way to get rid of the background showing at the top than setting it to #main{top: -10px}?

https://tessfisher.github.io/tribute-page/

Hi Tess! Page looks good so far, one thing to add is probably changing the font color so that it contrasts more with the background, as it can be a little hard to see sometimes.

  1. As for rems, that would be the correct way to use it as you are doing now, I see that you set your overall font size to 62.5%, which is perfect in combination with rems, so for responsiveness, all you would need to do is change the percent in the overall font-size in your media queries, as all the sizes will change in relative to that percentage.

And just remember with ems, they take after the overall font-size of the parent container, so if that’s what you’re after then that would work.

  1. As for the troubles with your media queries, how are you wanting it to display on your phone?

  2. By the silver background, are you referring to the lightish brown color? Because when removing your margin top, it still looks the same. Or are you wanting the header itself flush to the top of the page?

Thanks for the input!

I did check the contrast already and it had barely passed I think.

  1. I will probably leave this one and keep that in mind for the next project, thanks!

  2. For one thing, the two boxes on either side of the picture were supposed to shift to above and below the picture on a smaller screen and that wasn’t working. I tested the site at https://search.google.com/test/mobile-friendly and it told me to set the viewport. I’ve added

<meta name="viewport" content="width=device-width, initial-scale=1">

and it works how it is supposed to now.

  1. When I was testing it on my computer, before figuring out GitHub, there kept being a line of white at the top so I added that to fix it. But you’re right, now I have removed that and it isn’t doing it. So no idea what happened.