Stats Preview Card Component Main

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks fine, though the responsiveness and the mobile state could be better since the contents are being hidden and creating horizontal scroll.

  Michal already gave great suggestions on this which I agree as well. Just going to add some suggestions on this one as well.

  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • Also, there is an extra div as a first child of the body tag, you don't really need that one since you could have made use of the right-section-image be using like a picture tag so that the img will change according to what screen-size is in now.
  • I would prefer the body tag using a display: flex on this, but I can't suggest directly since like I said, there is an extra div. But if you remove the div consider making the body a flexbox to which it will center the content properly.
  • The text after the h1 should be using p tag since they are just regular text.
  • Your .box-numbers could have used ul since those are "list" of information about the company website.
  • Also, inside in those list information, those text should not be using a heading tag because they don't really give content on what the section would contain right, so better using p tag on them.
  • Lastly, maybe a better/descriptive value for the image's alt attribute.

  Aside from those, great work again on this one. If you have queries, just drop it here okay,

  Marked as helpful

  0

  ---

  

  tony_•70

  @onmywayfromwestindiesPosted about 3 years ago

  @pikamart

  Hi,

  thanks for your tips. It's fun to read your advices and to improve in my skills.

  Your list of advices is great to me.

  Thanks a lot.

  1
• 

  MichalTrubini•1,220

  @MichalTrubiniPosted about 3 years ago

  Hi Tony,

  I am also a beginner so don't take my advice as the advice of an expert.

  Your site does not work on mobile. By the looks of it, first you completed the desktop version and then scaled down by using media queries with max-width. I would suggest starting from bottom-up, that is a mobile-first approach. Then, when scaling up, use media queries with min-width.

  Furthermore, move from px to rems, don't set widths to fixed numbers like 700px, unless it makes sense sense or is justified because you might end up with horizontal scrolling on mobile.

  Also, when using header tags it is a good practice not to jump from h1 to h4. Instead, I would use h1 --> h2.

  Hope this helps.

  Michal

  Marked as helpful

  0

  ---

  

  tony_•70

  @onmywayfromwestindiesPosted about 3 years ago

  @MichalTrubini

  Hi Michal,

  thanks for your feedback.

  It's important to me to progress in my skills.

  Not problem for your advices: it's dope ^^.

  Thanks for all.

  Tony

  0

  

  tony_•70

  @onmywayfromwestindiesPosted about 3 years ago

  @MichalTrubini

  So, what the best mobile width for media queries ? The more used ? Because the are some width.

  Tony

  0