Responsive card using CSS flex

Community feedback

• Account deletedPosted about 1 year ago

  I noticed some areas where your HTML and CSS code can be improved to make it more efficient:

  HTML:

  1. Using the article tag:

     • Instead of using the main tag as a container for the card, use the article tag and give it the class global_card. You can leave the main tag unchanged.
     • There is no need to use IDs in this project; classes are sufficient.

  2. Improving accessibility with alt:

     • Instead of using the picture tag, use the img tag and don't forget to add the alt attribute to improve accessibility.

  3. Using h1 instead of h2:

     • Since the main title is important, replace the h2 tag with an h1 tag.
     • As for the div that contains the h2 and p tags, you can omit it because h2 and p are block elements by nature, so it's enough to add margin to the h2.

  CSS:

  1. Using max-width and min-height:

     • In the body, add the properties max-width: 100dvw; and min-height: 100dvh;.
     • Instead of using the shorthand background property, use just background-color.

  2. Improving responsiveness:

     • Because you set the card's width to 80%, you might encounter responsiveness issues. It's better to use the max-width property, which will greatly help with making the design responsive.
     • According to the design file, the ideal width for the card is 320px, so use max-width: 320px;.
     • You won't need to use flexbox within the card or text wrap. You can also remove the media queries.

  If you encounter any issues or don't understand something, feel free to let me know.

  12

  Marked as helpful