Responsive card using CSS flex

Community feedback

• Account deleted

  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.

  Marked as helpful

  1

  ---

  

  Rowert Méndez•70

  @P0wertDevPosted 6 months ago

  @dakirzakaria

  Wow! Thank you very much for your comment!!

  You help me a lot to understand the details that can improve my code

  I have a some cuestions:

  • Is it much better to replace width with max-width or min-width?
  • I use the media queries to change the orientation of the chart when the device is rotated. Is there another way to do it without the need for a media queries?
  • If i use the max/min, can i dispense with the media queries?

  And thank you again!! 😁

  0

  Account deleted

  @P0wertDev

  The differences between width, max-width, and min-width are as follows:

  • When using width with a specified value, that value remains constant and does not change regardless of the device size on which the website is viewed. This value stays the same whether the device is large or small.
  • When using min-width with a specified value, that value also remains constant when the website is viewed on any device. However, the difference here is that the width of the element can increase if the content inside it increases.
  • As for max-width, which is what I use, the element has a specified width that it does not exceed. If the content inside the element increases, it won't affect the width of the element. When the website is viewed on a small screen, the width of the element will decrease, making it responsive to all screen sizes.

  Regarding your second question, you can use flexbox or grid in a media query for height, where you specify a certain height. Honestly, I haven't used this feature before.

  As for the third question, it depends on the needs and requirements. For example, in this project, it is sufficient to use max-width, and you won't need a media query. However, if it is a large project with many elements, you might need to use media query.

  I hope my answers are clear and understandable.

  Marked as helpful

  0