Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Solution

@VitorRiquelme

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had difficulties in the css part, especially in the part of separating the shopping cart from the sentence, I mean I couldn't even make it, they were very close, and I also couldn't do the responsiveness part, I should do it with media query or something else

Community feedback

@VitorRiquelme

Posted

Ow thanks bro I didn't even think that the body could also receive the flex display too

1

Adriano 34,090

@AdrianoEscarabote

Posted

@VitorRiquelme no problem, keep coding!

0
Adriano 34,090

@AdrianoEscarabote

Posted

Hi Vitor riquelme, how are you?

Welcome to the front-end mentor community.

I really liked the result of your project, but I have some tips that I think you will like:

1- Document should have one main landmark, you could have put all the content inside the main tag click here

2- All page content should be contained by landmarks, you can understand better by clicking here: click here

I noticed that the content was not centered, to fix this we can do this:

I added:

body {
    min height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

The rest is great!!

Hope it helps...👍

1

Please log in to post a comment

Log in with GitHub
Discord logo

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