Product Preview Card using HTML and CSS

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  Hi!

  I'm really don't want to discourage you and min-width is interesting finding for your design approach, but that is an opposite to main idea of responsive design. It's good when your card decreased with the screen width - that's how it adjust to smaller screens without having multiple media queries. And than you use max-width to prevent it for stretch on the big screens.

  Also I can recommend you a picture tag to dynamically switch images on the different versions of the screens. It looks like this:

  <picture>
      <source srcset="mobile.jpg" media="(max-width: 900px)">
      <img src="desktop.jpg" alt="">
  </picture>
  

  This tag has one or multiple source tags with media condition and img tag which will be rendered if no one of the conditions is valid.

  So, you work is really good and you are used correctly semantic tags. Keep doing =)

  Marked as helpful

  0
• 

  Haitham Abdulhamid•190

  @Leo-yagamiPosted 4 months ago

  @Alex-Archer-I See, the problem I mainly faced was that when I didn't use min-width, my design would break very frequently. This required me to make twice as many media queries as I used now. If I am understanding correctly instead of making my container width not move using min-width as a resize down, I should use max-width to make my design stop expanding at a certain width to preserve the design.

  0

  ---

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @Leo-yagami

  Yes, the main idea of responsive design is to match as much mobiles screen as possible. So it's a good idea to allow it adjust to various small screens.

  Also, what do you mean by breaking design? If you mean lines alignment than it's normal if they would look slightly different on the different screens.

  0

  

  Haitham Abdulhamid•190

  @Leo-yagamiPosted 4 months ago

  Thanks for the tip, I will try using max-width next time. And by the way, do you recommend doing mobile-first or desktop-first?

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @Leo-yagami

  Well, I find out for myself that mobile-first are more convenient if you need to create mobile layout (which you'll need in 95% =)), but it was a bit hard at first to change my mindset =)

  0

  

  Haitham Abdulhamid•190

  @Leo-yagamiPosted 4 months ago

  @Alex-Archer-I Well I will try and adopt that mindset, thanks a bunch

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @Leo-yagami

  You're welcome. Feel free to ask anything, comment and stuff =)

  1