stats-preview-card-component-main

Community feedback

• 

  Pierre ||| per.net•180

  @finkenmannPosted almost 2 years ago

  you should check your breakpoints. A lot of mobile devices going down to 320px. At this point your layout is broken. Also the value for the desktop version. Make it bigger or use flexible values for your container and the child elements to be more flexible.

  Marked as helpful

  0

  ---

  

  Leonardo Rodrigues Gomes•160

  @gomes-leonardoPosted almost 2 years ago

  @finkenmann thank u Pierre. what breakpoints do you use? I don't know which breakpoints to use, should I always use a value? or can change according to the design

  0

  

  Pierre ||| per.net•180

  @finkenmannPosted almost 2 years ago

  @gomes-leonardo I don't use fixed breakpoints. The layout should always determine the correct breakpoint.

  In this case there are already layouts for small screen and desktop. Now you have to decide yourself, up to which width your content still looks good. I had first decided for 700px, which was actually too high for me, because the mobile design became too wide and was no longer very nice, but the two-column did not fit from the content. But when I shrunk the left element, I was able to lower the breakpoint to 600px and I am happy with this solution.

  Design mobile first in any case. So start with the mobile design. You don't have to go below 320px, because there are hardly any smaller devices. Then check in the browser, from which width the layout does not look good anymore and then look for a solution for the next size, or take the solution that is already designed. With mobile first you usually avoid that you have to reset code, because mobile usually gets along with little code. With wider layouts, the complexity is then increased by flex or grid, but usually builds on the code from the mobile design. I hope this helps.

  A tricky point is usually the jump down to the single column mobile design. Because here from e.g. two-column content to single-column content always a very big jump takes place and images and cards look very big at the beginning. But you just have to find the right compromise.

  Translated with www.DeepL.com/Translator (free version)

  Marked as helpful

  0
• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

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

  • The header element is not needed for this challenge.

  • The images 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.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The images 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.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The statistics at the bottom are a list, so it should be built using an unordered List element.

  More Info:📚

  MDN <ul>: The Unordered List element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Give the header a background-color of soft violet. Give the img a max-width of 100% , mix-blend-mode of multiply and an opacity of 0.7.

  To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  Use rem or em as unit for the padding, margin and width values. for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful HAPPY CODING

  Marked as helpful

  0