Responsive Product Preview

Community feedback

• 

  Deepak•190

  @itsdevdeepakPosted over 1 year ago

  Hello Jeffrey, how are you? Welcome to the community! great effort on your project's.

  I've few tips for you:

  1. Try not to use manual width with flexbox here a great article on sizing flexbox.
  2. use native <picture> element or <img> tag with srcset attribute insted of mannualy swaping between images.
  3. make sure your image is not starching you can do this with a image container like:

  .image_container {
  ...
  }
  .image_container img{
  display: block; /* use block element */
  width: 100%; /* take entire with of container*/
  height: auto;
  object-fit: cover; /* if image is overflow use it as cover */
  object-position: center; /* position overflow image in center  */
  }
  

  Learn more about responsive image;

  hope you find this feedback helpful and yeah keep putting great effort.

  Marked as helpful

  0

  ---

  

  Jeffrey Stanley•130

  @JS-LawPosted over 1 year ago

  @itsdevdeepak Hey, thank you for taking some time to give me some critiques! I really appreciate it.

  1.)Thank you so much! That article is a lifesaver and I will definitely implement that instead of what I was doing before to "get it done" I cant wait to utilize it in the next project.

  2.)Wow, this has me thinking I need to dive back into HTML more. I made an assumption that HTML could not be used to change an image based on certain constraints. Im excited to review it and I'm already scratching my brain about how I'd complete this project with that in mind.

  3.) I was definitely unaware of starching and I cant thank you enough for letting me know about it.

  I seem to have found a way to complete this project in a visual sense but I'm thankful for the information/articles you've gathered for me. Would I be right in thinking to utilize <picture> as a class and setting its display to none in order to produce the same outcome?

  Once again, thank you! I hope that I correct these mistakes in the next project.

  0

  

  Deepak•190

  @itsdevdeepakPosted over 1 year ago

  I'm glad you like my feedback.

  about the picture tag, i think you should use it like container and make sure img inside it fill the entire space.

  Generally we make picture tag a block element so that it will also take entire space of its container.

  for example this card component:

  • card (max-width: 900px):
  • card-header (40% width)
  • picture(block)
  • card-body(60%):

  In this example we are making card header to take 40% of its card to display image and 60% for card body, here card is set to max-width of 900px that means its width cant go beyond 900px but can go smaller, so our header image will go no more then 360px(900*0.4).

  one more helpful tip: Try to see the solution of other after you completed the challenge and learned form them or if you find they can improve their code with your feedback than go for it. that what I'm doing XD and yeah keep putting the great effort.

  0