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

Desafio utilizando HTML e CSS

mary1308 10

@mary1308

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


Olá,

Esta é apenas a segunda página da web que construo. Usei CSS e HTML simples. Achei difícil tornar o design totalmente responsivo em diferentes larguras de navegador e evitar espaços em branco excessivos na caixa de texto, mas acredito que consegui produzir algo aceitável no final.

Fique à vontade para fornecer comentários, críticas ou conselhos.

Community feedback

@Namonaki0

Posted

Hi Mary, well done for completing the challenge.

I would suggest taking the mobile-first approach and work your way up - you can use min-width for your media-queries as breakpoints increase. That way it's easier to tackle responsiveness for different screen sizes. You are also using gap in different parts of your code and that's probably what's causing your issues with white spacing.

I hope this helps.

Marked as helpful

1

mary1308 10

@mary1308

Posted

@Namonaki0 Hi Andre, thank you for the help.

1

@iamdylanmj

Posted

you have done great, as a newbie like yourself to this, There were some points to learn from your code, and also there was something that I noticed, that it seems you forgot that you do not need to write some CSS rules you already wrote within the media queries unless you overwrite them. good luck for your coding journey, I hope this may help.

Marked as helpful

0

mary1308 10

@mary1308

Posted

@iamdylanmj Hi Dilan, thank you for the help.

0

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