Four card challenge with HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop seems fine, it responds fine as well in screen changes, but for the mobile layout, horizontal scrollbar appears. The reason is that on mobile layout, the margin being used on the icon images is much larger on the container. You can inspect it in dev tools and see what I mean.

  Also, before going on. It is a good practice to have reset or base stylings. This would make the project more easy to handle, and the most important one is this. Add this in your styling.

  html {
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after{
    box-sizing: inherit;
  }
  

  Explaining it would be long hehe so you can just search it up in google. But trust me, always include those in your css okay. You will notice something great when applying stylings to an element, especially padding and margin.

  Some suggestions would be:

  • Always have a main element on a webpage. This helps users to properly navigate your website. On this one, the .container element could have used main element instead of div.
  • The text below the h1 element should be inside p tag. Always include text inside p tag and not just div. You can nest the p tag inside the div as well.
  • The h3 tags could have been h2. Do not skip a level of heading tag, if you use h3 make sure that h1, h2 are present, not skipping any level.

  Only those. Also remember to apply those stylings in every project. It will make things easier to handle. Great work again on this.

  Marked as helpful

  1

  ---

  

  Stephane Jean•360

  @distephano30Posted about 3 years ago

  @pikamart so many useful tips! thank you very much! I'll apply your suggestions

  0
• 

  Conrad•950

  @ConradMcGrifterPosted about 3 years ago

  well done, the site looks good to me. The only thing I would suggest is that you put a max-width on your main container so that it doesn't stretch out at bigger screen sizes

  Marked as helpful

  0

  ---

  

  Stephane Jean•360

  @distephano30Posted about 3 years ago

  @ConradMcGrifter yes good point! Thanks

  0