3-column-preview-card-component-main

Community feedback

• 

  salma fadl azzam•330

  @salmafadlabdulrahmanPosted almost 2 years ago

  Hello there, Great job working on this proejct👏👏, I have some suggestions for you, I hope they help you: 1- Try to always use "alt" attribute in you <img> tag, making an img tag without alt will not affect the display of your image but it'll be helpful for people who are using screen readers, so you're just providing a little description about the content of the image.

  2-To make your website responsive, and make it look good on the mobile version, you could use "flex-direction: column" that would make all your tags line up vertically, because the default for flex-direction is "row", another approach you could use "grid" and then grid-template-columns: repeat(1fr), this would also make a column for you.

  3-There is a resource that helped me a lot in matters of making a responsive web design, is "Learn Responsive web desing" course on Scrimba.com, I took this course myself and it was a huge help to me and I got the chance to practice on some interesting projects, after that I started applying what I learned on frontend mentor project. I recommend you take this course.

  Good luck🙌

  0
• 

  vinu cyril•980

  @vinumanPosted almost 2 years ago

  Hello,

  Go job completing the project. The desktop design looks neat.

  To make it mobile responsive, use media query in css. Check out https://www.youtube.com/watch?v=2KL-z9A56SQ for a quick start on media queries.

  Add flex-direction: column; for the main container and you can adjust the max-width property of the child elements to make it look on mobile devices.

  0
• 

  Magdy Ali•80

  @Migo090Posted almost 2 years ago

  just add this flex-direction: column; to main element in media

  0