product preview component using flexbox

Community feedback

• 

  Tushar Biswas•4,080

  @itushPosted over 1 year ago

  Congratulations on completing the challenge! 🎉

  • To make it mobile responsive it is important to first understand how different breakpoints work with the media queries, which breakpoints to target etc.

  • Feel free to go through my product preview project code and notice how I handle responsiveness with mobile and desktop product images.

  I hope this helps🤞

  Happy hacking🚀💻

  Marked as helpful

  1

  ---

  

  nina1234567896•280

  @nina1234567896Posted over 1 year ago

  @itush Thankyou. This is really helpful. I am having trouble deciding what breaking points to use when i use media queries.

  1

  

  Tushar Biswas•4,080

  @itushPosted over 1 year ago

  @nina1234567896

  You are most welcome!

  We all improve with practice.

  • Designs only change at defined media query breakpoints. We have two options... either we can target a breakpoint apply some changes for that breakpoint and up screens or the same breakpoint and down screens.

  • For example, If you want to make the body blue @600px then you also need to decide whether the body remains blue on 600px and up screens or 600px and down screens. If you decide to maintain a blue background for 600px and up screens you'd use @media only screen and (min-width: 600px) {...} and @media only screen and (max-width: 600px) {...} for the opposite scenario. And lets say @500px you want a red background and @700px you need a yellow background, then you need to follow the same drill.

  • Please note: There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple we target the typical five groups of breakpoints. However, You can add as many breakpoints as you like to make it more responsive.

  • My CSS article that I've shared with you previously might also be helpful to understand the usage of media query.

  • Feel free to ask more questions!

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  PiCTURE TAG 📸:

  • Looks like you're currently using media queries for swapping different version of image, So let me introduce the picture element.

  ---

  • The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.

  ---

  • Example:

  <picture>
  <source media="(max-width: 768px)" srcset="small-image.jpg">
  <source media="(min-width: 769px)" srcset="large-image.jpg">
  <img src="fallback-image.jpg" alt="Example image">
  </picture>
  

  ---

  • In this example, the <picture> tag contains three child elements: two <source> elements and an <img> element. The <source> elements specifies different image sources and the conditions under which they should be used.

  ---

  • Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user

  ---

  • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  nina1234567896•280

  @nina1234567896Posted over 1 year ago

  @0xAbdulKhalid Very helpful indeed. I will definitely be using this in my next project.=)

  0

  

  nina1234567896•280

  @nina1234567896Posted over 1 year ago

  @0xAbdulKhalid Can an svg be used inside a picture element? I am having trouble using svgs inside the picture element in this new project i'm working on.

  0