Equalizer Responsive Landing Page

Community feedback

• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted about 3 years ago

  Hey Angelo! Excellent work on this challenge! It's great that you've made such an effort on the responsive side. You have quite a few instances where you're setting specific heights, widths, margins, and other values to position elements. This seems to be what's contributing to most of your repetitive code.

  I'd recommend checking out Every Layout, which is an excellent resource to help shift layout decisions onto the browser instead of manually overriding your own code and fixing positions.

  If you find yourself writing code like margin-left: 13%; and top: -410px;, it's usually a sign that there's a better way to do it. These are what developers call "magic numbers" as they're pretty arbitrary and are essentially plucked from thin air.

  You'll find yourself using them less and less as you continue to gain experience building projects. So, for now, it's mostly a case of being aware of it and then trying to find more reusable solutions whenever it happens again.

  I hope this helps! 🙂

  P.S. Please try to avoid swearing in your messages as it goes against our community guidelines. You can edit your message by going to "Visit challenge hub" at the top of this page and updating your solution. Thanks! 👍

  32

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted about 3 years ago

  Hello, Angelo! 👋

  Thank you for taking the time to see my solution! I appreciate it! 🙌

  Anyway, good effort on this challenge! 👍 It's great that you used the mobile-first approach when writing the styling! Well done! 👏

  Regarding your questions.

  • About the responsiveness of this project, I would rather set a .container that limits the layout to 1440px and then have a margin: 0 auto to make the content in the middle of the page on a larger screen. That way, you don't need to worry about bigger screen sizes. Also, it's worth knowing that usually, people that have a large screen will have zoom level around 150% to see the website.
  • I used relative positioning on mobile layout and for the rest of the layout, I used absolute positioning for the card element or in this case, the .info element. I would not recommend setting a height and a width on the card element. Most of the time you want to let the element inside it dictate the height of the parent element and use max-width instead. It's worth doing because in reality, the content of the page might change so it might be harder to maintain if the content change often (keep adjusting the height).

  Some more suggestions.

  • Reduce the amount of whitespace at the bottom of the page. Currently, there's so much whitespace in the footer.
  • Use either rem or em for the margin instead of using %. By using %, the margin might result in unexpected behavior on some screen sizes since it always depends on something. Also, unlike width where you can set a max-width to limit the amount of width, margin on the other hand doesn't have it.
  • The download buttons should be link elements with download attribute. button elements.

  I hope this helps! Keep up the good work! 👍

  12

  Marked as helpful