Stats Preview Card Challenge

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello Lauro235 , I have some suggestions:

  • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).

  • Use an unordered list with 3 items for the stats <div class="stats-wrapper"> . The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. They should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • You're using width in percentage. Not a great idea as you're losing control of the layout. Use max-width instead, let it grow to a point.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px won't allow the user to control the font size based on their needs.

  Hopefully this feedback helps .

  Marked as helpful

  0

  ---

  

  P

  Lorentz Bloom•90

  @Lauro235Posted almost 3 years ago

  @PhoenixDev22 Hi Pheonix, your feedback was really helpful. I will put attributes into the footer for future projects and I liked your list suggestion as it would be more accessible.

  My one query for you was on font sizes. As you saw I used the clamp() property in the variable section to define the size. This allowed me to keep the design quite close to the picture at all sizes. Do you see a problem with this in the real world? I was just doing something that I thought would keep the design as close to the pictures provided.

  Thanks again for your feedback.

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  @Lauro235

  • clamp() functions don't cause any problem. Using clamp() instructs the browser to change the font-size depending on the width of the viewport but also, crucially, it allows us to have a min font size for legibility.(It's about setting minimum and maximum values using rem )

  Hopefully this feedback helps

  Marked as helpful

  1

  

  P

  Lorentz Bloom•90

  @Lauro235Posted almost 3 years ago

  @PhoenixDev22 Got you, this was helpful. Thanks :)

  1