Submitted about 1 year ago

Product Preview Card - Mobile First, Javascript, and Flexbox

Scott Tabor• 150

@scottttabor

Preview site View code

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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-Dickson• 5,610

@Kamasah-Dickson

Posted about 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 helpful

Scott Tabor• 150

@scottttabor

Posted about 1 year ago

@Kamasah-Dickson Thank you for the tip! Really appreciate it.

Scott Tabor• 150

@scottttabor

Posted about 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.

Please log in to post a comment

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