Submitted 3 months ago

Using SCSS Flexbox for layout, incorporating accessibility design.

#sass/scss

LuRouFan•130

@angel-retry

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Write CSS code using SCSS.

What challenges did you encounter, and how did you overcome them?

Adjust the width and height of the image for smaller devices. Use object-fit: cover; and object-position: center; on the parent element of the img:

{
   width: 100%;
   height: 240px;
   object-fit: cover;
   object-position: center;
}

What specific areas of your project would you like help with?

Please review my code. I want to know if there are better ways to write CSS, and I'm not sure if I'm using SCSS correctly. Are there any ways to make my SCSS code more maintainable and readable?

Community feedback

Tunde Abdulhamid Sanusi (Tuham)•190
@tuhamworldPosted 3 months ago
Hello LuRouFan,

You did a great job with the solution especially taking the bold step of writing your styles with Sass (Scss).

Here are some improvements I recommend you also make:

Add hover effects to the "Add to cart" button

Removing/Replacing some dummy files in your project folder (e.g README template)

README.md will be shown on your github code profile as details about your project, it is highly recommended to change the texts to suit your own style

Best Regards
0

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