Hi passionate coders, Unfortunately, the change we added in CSS was not included in the video, so here is the explanation: In your product card class '.product-card', you'll need to set the width and height to 0, then create a new selection called '.product-card.active' and add the width and height properties of the product card which are: 'width: 260px; height: 379px'. This ensures only the product cards that have the active class added (through JavaScript) are displayed. Thanks for watching the video, happy coding! 🙌
The full playlist of the Product Page Series can be found here: ruclips.net/p/PL0lX0bJqJuTGGrjBqypE8mHHdCIFY49mo&si=7ue7NJpWNbF9PTrX Welcome to Part 5 of the eLife E-commerce Electronics Product Page! This is the fifth part of the WebSeries, where we use JavaScript to create spacing between each product card, as using the CSS property 'justify-content: space-between' can cause unnecessarily disruptive outcomes . The function of the slideshow and adding items in a user's cart when they click on the blue 'Add To Cart' button, and when a user clicks on the heart button to add an item to their wishlist will be shown in part 6, so stay tuned! Happy coding! 🙌
Oh apologies, it seems the video has not included the CSS explanation, so here is what changed in CSS: So for your product card class '.product-card', you'll need to set the width and height to 0, then create a new selection called '.product-card.active' and add the width and height properties of the product card which are: 'width: 260px; height: 379px'. This ensures only the product cards that have the active class added (from JavaScript) are displayed. I hope this answer satisfies you! Happy coding! 🙌
![NOSFERATU - Official Trailer [HD] - Only In Theaters December 25](http://i.ytimg.com/vi/nulvWqYUM8k/mqdefault.jpg)
Hi passionate coders,
Unfortunately, the change we added in CSS was not included in the video, so here is the explanation:
In your product card class '.product-card', you'll need to set the width and height to 0, then create a new selection called '.product-card.active' and add the width and height properties of the product card which are: 'width: 260px; height: 379px'. This ensures only the product cards that have the active class added (through JavaScript) are displayed.
Thanks for watching the video, happy coding! 🙌
It is very helpful. Thanks
The full playlist of the Product Page Series can be found here:
ruclips.net/p/PL0lX0bJqJuTGGrjBqypE8mHHdCIFY49mo&si=7ue7NJpWNbF9PTrX
Welcome to Part 5 of the eLife E-commerce Electronics Product Page! This is the fifth part of the WebSeries, where we use JavaScript to create spacing between each product card, as using the CSS property 'justify-content: space-between' can cause unnecessarily disruptive outcomes . The function of the slideshow and adding items in a user's cart when they click on the blue 'Add To Cart' button, and when a user clicks on the heart button to add an item to their wishlist will be shown in part 6, so stay tuned!
Happy coding! 🙌
Code CSS for add 'active'?
Oh apologies, it seems the video has not included the CSS explanation, so here is what changed in CSS:
So for your product card class '.product-card', you'll need to set the width and height to 0, then create a new selection called '.product-card.active' and add the width and height properties of the product card which are: 'width: 260px; height: 379px'. This ensures only the product cards that have the active class added (from JavaScript) are displayed. I hope this answer satisfies you!
Happy coding! 🙌
Part 6 plesea?
@@Nguyen-The-Hung Hi, the video for part 6 has been made, so it will be posted very soon, stay tuned! 🙌
madam ?
@@newshortschannel1 Hi, how may I help you? 🙌
@@codeharvestguide yes