Responsive Mobile First Product Preview Card Component
Design comparison
Solution retrospective
Hey Guys
Assessment needed for this little guy.
It wasn't difficult, but I had minor issues with making it responsive.
I also had to rack my brain a little with making the button:hover affect the product-paragraph.
One major concern is that whenever I hover on the button and the paragraph's font size is reduced, the dimension of the card also changes. In the design preview, there were no such changes, any tip on how to do that?
Community feedback
- @ChamuMutezvaPosted over 2 years ago
Hi why-not-phoenix
There is some improvement that needs to be done. The html structure for a start needs a re-look, while you commented on the product information, you must remember that comments are for developers and not users. Anyone using the site might be lost or confused on how to follow along
- heading elements should follow a sequential order with the h1 being the first heading element, followed by an h2 , in that order. An h1 should never be the last heading of a site.
- the layout shift is caused by the following code, there is no reason to change the font-size of the paragraph on hover - it really will cause a layout shift
.purchase-button:hover ~ .product-paragraph { font-size: 1.2rem; }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