Responsive web page using viewport

Community feedback

• 

  Chyunjet•620

  @Jetyun

  Posted almost 3 years ago

  1. For mobile, maybe you want to set the container width to be smaller than 350px, because in the design, it seems that there is still some space to see the light blue background color due to the design smaller width.

  2. For desktop, you can put @media screen and (min-width: 1440px){} and put the css setting in the curly bracket. When you use F12 and amend the screen width to 1440px, you will see the changes. This is called media query. maybe you want to watch youtube dave gray tutorial on media query to learn more.

  • in addition, I think you accidentally insert the paragraph into your footer.
  • If you want to you can delete the style tag in HTML and put the .attribution css styling into css file. This is not wrong, but I think it would be a hassle to look for the css styling in future if the styling is not all included in the CSS file (Other challenges may require you to wrote a longer CSS file)

  00

  Marked as helpful
• 

  David•7,960

  @DavidMorgade

  Posted almost 3 years ago

  Hello John, congrats on your first Frontendmentor challenge!

  In this case seems that your component is already responsive, but for future and larger projects I would recommend you to use relative units such as rems / % instead of pixels, also try to use a reseter stylesheet such as normalize, that will help you reseting the default styles of the browser, like the body margin. You can get normalize here

  For next projects try using a bit more semantic tags, like main, section and footer, in this project since is a little component in not that important, but it can help you a lot for your future projects!

  Hope my feedback helped you!

  00

  Marked as helpful