Product Preview Card - Mobile First, Javascript, and Flexbox
Design comparison
Solution retrospective
I used Javascript to be able to change the source of the image instead of HTML srcset. I just wanted the practice of using javascript on a project! Id love any feedback on the format of my code, how I wrote my javascript code and included it in my HTML. My only question is that the product card is responsive in all the mobile options except when it goes below a width of 375px there seems to be some white space that shows below the main background. Any tips for why that is happening would be appreciated.
Community feedback
- @Kamasah-DicksonPosted over 1 year ago
@scott Tabor you did I really great job. your solution was very responsive as well. But one of the things you forgot to add was the type attribute for your button. some of the importance are.
- It helps to define the role and behavior of the button for users and assistive technologies.
- Providing a type for your buttons also helps improve the accessibility of your website.
- The type also determines if the button is a submit,reset or just a button.
I hope this was helpful. Happy coding🔥
Marked as helpful1@scottttaborPosted over 1 year ago@Kamasah-Dickson Thank you for the tip! Really appreciate it.
0 - @scottttaborPosted over 1 year ago
I actually figured out what was wrong immediately after I uploaded this. On my main tag I had the minimum width set to 375px, once I took that out It solved my issue.
0
Please log in to post a comment
Log in with GitHub
Join 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