Responsive Product preview card using Flexbox

Community feedback

• 

  Zain•150

  @zainy2401Posted about 1 month ago

  Hey, awesome solution! Someone recently told me about a much easier solution where you just put this line in your CSS: content: url('images/image-mobile-desktop.jpg'); in the image selector located inside the media query. It just reduces the amount of code you have to write so I thought it would be cool to pass on the advice :)

  Marked as helpful

  0

  ---

  

  SITRAKA Tsimisaraka Joliot•70

  @Joliot-TSIMISARAKAPosted about 1 month ago

  @zainy2401 Are we making use of pseudo-element ::before or ::after with that solution ? Or are we changing the source of the image to src="images/image-product-mobile.jpg" in the media query ? I've adopted the use of <picture>tag in my approach, I don't know if it's well supported by browsers though

  0

  

  Zain•150

  @zainy2401Posted about 1 month ago

  @Joliot-TSIMISARAKA I believe you do not need to use the pseudo-element and just changing the source in media query will suffice. Your solution is good and as far as I can tell, all browsers (except IE) will support it but I can't provide any further help with this because I'm new to this as well.

  0

  

  SITRAKA Tsimisaraka Joliot•70

  @Joliot-TSIMISARAKAPosted about 1 month ago

  @zainy2401 Then How to we pull it off ? I'm not sure how we can change the src of the image in the media query, Isn't JavaScript the only way to do that ?

  0

  

  Zain•150

  @zainy2401Posted about 1 month ago

  Hey, if you check your GitHub I sent a pull request with the changes I made to your code and a description of what I did! Let me know if you need any further help with this issue and how the solution looks to you!

  0