A Responsive Design of a Stats Preview Card

Community feedback

• 

  Iniyavan•220

  @Iniy96Posted about 2 years ago

  hey I !, It's a great job so far what you have done. I can see you have given the improper border radius for the image. Instead of using border-top-left-radius or border-top-right-radius separately try using the border property of all the corners at once. The syntax is as follows: img{ border-radius: top-left top-right bottom-right bottom-left; } Example: img{ border-radius: 0 0 10px 10px; } If it is confusing imagine a clock-wise rotation starting from top-left corner.

  Marked as helpful

  1

  ---

  

  saminstein•130

  @saminsteinPosted about 2 years ago

  @Iniy96

  Oh yeah, Thank you!

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Increase the width of the component to better match the FEM example.

  • The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a Paragraph Element.

  • The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  0
• 

  Abdullah Ayoola•1,080

  @abdullah43577Posted about 2 years ago

  Hello there, great job having gotten to this point so far. I've also completed this challenge, and if I understood what you meant by the question asked, you're having a challenge styling the image you've styled for the desktop version, but couldn't get the mobile layout, right?

  if so, then this is what I did for mine (which I feel is the easiest solution) use flexbox for the container holding both the content and the image, so you can easily style them properly. Then on mobile, since the Figma design given was to put the image on top of the stack order of the other designs. Normally this is impossible because HTML reads from top to bottom. And it's also possible and very much possible if you used CSS Grid, all you have to do is the container used to style the contents on the desktop, give the container a display: grid; and grid-template-areas: "image" -> grid-area: image; this should automatically style the image above the other content as opposed to the previous way of HTML reading items from top to bottom. Let me know if this helps you, or if you don't understand.

  0