product-preview-card-component-main with HTML and CSS

Community feedback

• 

  Tushar Biswas•4,060

  @itush

  Posted about 2 years ago

  Congratulations on completing the challenge! 🎉

  Nice attempt:)

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

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

  • Looking at the designs, you need to decide for how many breakpoints you wish to modify the same layout and add media queries accordingly.

  • 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.

  • In my CSS article that I previously shared with you I have discussed media queries, mobile-first workflow etc. was that any good for you? was it easy enough to understand the concepts? please let me know whenever you can :)

  Please feel free to ask more questions👍

  Happy hacking🚀💻

  12

  Marked as helpful