Landing page: Drakkar Systems (responsiveness feedback)

I Built This
1

Hello,

I’ve just completed the product landing page challenge. I created a landing page for gaming laptops. You can buy three specific models but also customize your own one, so you have the email input to request it with your own ideas.

Here’s the link: https://codepen.io/aitormorgado/pen/MWayXPy

I have two main doubts:

  1. I don’t really know if I’ve used the rem property correctly in my code. After some research, I decided to write font-size: 62.5%; as a root property and then font-size: 1.6rem in the body element, so 1rem equals 10px and it’s easy to measure.

  2. I would like to know if the code for the responsiveness of my site is correct or enough: the media queries, using em, vw and flexbox. Is there anything wrong that I should avoid in the future?

Thank you very much for your help!

2

  • Regarding the font size, yes, that is an acceptable solution. Because you are using ‘rem’ units the user is still able to adjust the text size to their liking.

  • The responsiveness is good, but there is room for improvement. Start with your browser as narrow as it will go. Everything looks good. Now slowly widen the browser. The model boxes at the bottom start to widen as well then suddenly they get narrower again. Same with the list below the menu (and even the menu). This isn’t a show stopper, just seems a little clunky. Also, as I increase the text size, the model boxes do not get wider to adjust to the bigger content. Again, not a showstopper, just seems like a mistake.

  • The biggest issue with text size increases is the menu at the top. Eventually the content breaks out of the menu box and creates a horizontal scroll bar. If you base your media query break points on ‘em’ then this problem is easily fixable.

  • Another issue related to text size, the icons in the list at the top do not increase as the text size increases. In fact, they decrease in size until they eventually disappear.

1 Like
3

Hi @aitormorgado, some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • Your page passes 14/16 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • Some minor coding errors you can clean up.
1 Like