A11y • Golden Ratio Text • Semantic html

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Matt, congratulations for your new solution!

  Your solution is really good done and full responsive, something you can do to improve it, is to give at least 20% less the font size when the mobile version becomes 340px to make the font-size fit the container.

  To make the solution even more responsive, you can add this media query to avoid the pricing to pop out the container after 280px (the layout breaks)

  @media (max-width: 320px) {
  .price {
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Matt•130

  @warehouse827Posted over 2 years ago

  @correlucas I was thinking of circling back around to this and trying clamp() on the h1 (headline), body text, and "prices".

  In testing, I did not review below 375px. That was an oversight on my part. Thank you!

  1