Equalizer Landing Page with HTML, CSS - Flexbox

Community feedback

• 

  BrunoMoleta•700

  @brunomoleta

  Posted about 2 years ago

  Hi Aydan,

  I suggest you watch out for the use of pixels in your CSS as, according to Heydon Pickering & Andy Bell from Every Layout:

  "Screens are made of pixels and are not regular, immutable, or constant. A 400px box viewed by a user browsing zoomed-in is not 400px in CSS pixels. It may not have been 400px in device pixels even before they activated Zoom.

  Designing using the px unit not only encourages us to adopt the wrong mindset: there are manifest limitations as well. For one, when you set your fonts using px, browsers assume you want to fix the fonts at that size. Accordingly, the font size chosen by the user in their browser settings is disregarded.

  [...]

  The units em, rem, ch, and ex present no such problem because they are all units relative to the user’s default font size, as set in their operating system or browser. Browsers translate values using these units into pixels but in a way sensitive to context and configuration. Relative units are arbitrators."

  Also, advice is to adjust the media query widths from 420 to 680 px and especially from 770px to 900px at this size, as a 2023 tablet has around 800 to 850px wide. The red card at that specific width is getting hard to read. You could adjust removing the position: absolute and setting a margin-inline-end with a %, I believe.

  Great hustle, and keep it going

  Best regards from Brazil 🇧🇷 :)

  11

  Marked as helpful