Product preview card using html and pure css

Community feedback

• 

  Peter Samuel•200

  @PeterSamuel2001Posted about 1 year ago

  You can use media queries to solve this issue. let me know if you need help with them.

  Marked as helpful

  0

  ---

  

  Erick Wiliams•30

  @WlmserickPosted about 1 year ago

  @PeterSamuel2001 I would be glad if you helped me on how to use media queries

  0

  

  Peter Samuel•200

  @PeterSamuel2001Posted about 1 year ago

  @Wlmserick Sorry for the late response as I have been a bit busy.

  Media queries are made so they trigger at a certain screen width (in pixels) to make the design look a bit more organized on certain screen sizes or sometimes change the way the page looks drastically.

  the way they're used is by stating what width you want it to trigger at, mostly used if you're going for a mobile first approach: you typically use the media query for desktops as the mobiles are already accounted for.

  @media (min-width: 768px) {

  }

  If you're using a desktop first approach then you may use use

  @media (max-width: 768px) {

  }

  inside it you can hide elements that are normally shown on desktop but need to be hidden on mobiles or tablets, such as images. Some designs have 2 images, 1 for desktop and 1 for mobile.

  Some designs are difficult, at least for me as a begginer, to make responsive. In such designs I may use multiple queries. Keep in mind that this example is of a desktop first approach, so mobiles weren't accounted for when I began.

  @media (min-width: 375px) and (max-width: 624px) {

  }

  In this one, we're incorporating the two types (not the only two types of media query though) to make it trigger at a certain width and then stop working at a certain width

  The community is torn between people who use mobile first approach and others who use a desktop first approach, do whatever suits your coding style as long it doesn't make for a very complicated code.

  I hope this was of use to you, let me know if you need any help.

  Marked as helpful

  0
• 

  Tony Appiah•160

  @TonyAppiahPosted about 1 year ago

  Hi Erick,

  Could you be a bit specific with the kind of trouble you're having with responsiveness?

  0

  ---

  

  Erick Wiliams•30

  @WlmserickPosted about 1 year ago

  @TonyAppiah I'd like for it to adapt to different screen sizes. Like for pc and mobile should be different like it was shown for mobile and desktop designs

  0

  

  Tony Appiah•160

  @TonyAppiahPosted about 1 year ago

  @Wlmserick

  Media queries will solve that problem buddy. Check out the link below.

  https://youtu.be/2KL-z9A56SQ?si=TLyod7SGryEAa_CH

  Marked as helpful

  0