Responsive Card using Flexbox

Community feedback

• 

  Andrey•2,800

  @dar-juPosted 4 months ago

  Hi!

  Good job!

  About your question. Not quite the right solution about relative font size, because the layout remains static when zoomed. For example, I have poor eyesight and try to zoom in using Ctrl + mouse wheel, it won't work here. Better use pixels or rem.

  I noticed how you replace the picture for the mobile version, this method is good if you manage content using JS. In HTML there is a picture tag for this. See how tag picture works.

  As for the tags, look, in this task there is only one tag p - paragraph, this is the description of the product. There is also a title - the name of the product, use the H tag. Everything else here is span. Semantically, this will be correct. Search engines and readers will be able to understand exactly what is here.

  The same applies to the button, there is a button tag for it.

  Also, search engines and readers look at what is written in the alt - you need to write more specifically there. If you decided to connect the cart icon via the img tag, and not via the css background-image, then the alt tag should be left blank.

  Good luck with your projects!

  Marked as helpful

  1

  ---

  

  Abdush salam•40

  @abdushskPosted 4 months ago

  @dar-ju For the solution, learned a lot. Now it actually makes sense when rem is important for sizes.

  0
• 

  hitmorecode•7,240

  @hitmorecodePosted 4 months ago

  Nice well done. Just a few tips.

  • Avoid using % for width or height of cards. When switching to mobile screen size the card shrinks before it grows again. This will not look good on an actual page.
  • Avoid using % for border radius when you just want to round the corners.
  • You don't have to use position to place the card in the center of the page. You can easily do this with flexbox. Just add a min-height of 100vh on the body and add flexbox on the body.
  • There are no headers on your page.

  I hope you find this helpful. Keep it up👍👌

  0

  ---

  

  Abdush salam•40

  @abdushskPosted 4 months ago

  @hitmorecode If not % for border radius then pixels?

  0

  

  hitmorecode•7,240

  @hitmorecodePosted 4 months ago

  @abdushsk px, em or rem

  Marked as helpful

  1

  

  Abdush salam•40

  @abdushskPosted 4 months ago

  @hitmorecode thanks for the advice learned a lot.

  0