Design comparison
Solution retrospective
I'm glad I'm submitting this project now because it's the fourth one I'm working on here and this one took my time and understanding. I'm happy to discover the tricks to hide HTML elements on the web using the display none which I used to hide the desktop image on mobile and did the opposite on mobile.
About the button, I asked ChatGPT to develop the event listener syntax to display a text saying view cart when the product button is clicked, it wasn't required just a bonus tip I thought would be helpful.
What challenges did you encounter, and how did you overcome them?At first, I didn't know how to switch the images on different screens, I did know the solution was to hide one of the pictures on the screen size but my question was how do I start? That's when I jumped into Google to find the solution and found out that all I needed to archive the needed result was a CSS media query to display the images as required. Thanks to stack-over-flow that's an amazing community
What specific areas of your project would you like help with?I'm still learning and still in the early phase of my software development career, so your contribution is appreciated and I'm still trying to learn how to use the right HTML element on every line of code. Also learning how to improve my layout styling using CSS Flexbox and CSS Grid.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord