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

Article preview component

@Nanosync

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any comments regarding the coding style and how improvements can be made are appreciated!

Community feedback

@jomefavourite

Posted

I noticed you use % a lot. It has it use cases but it can really be a problem when it comes to responsiveness.

Probably, the main section could be replaced with

main {
  margin: auto auto 30px auto;
  padding: 0 10% 0 10%;
}

// try

.container {
  width: 80%
  max-width: 1200px;
  margin: auto;
}

That'll be a responsive approach.

You could see how I did it here . But it isn't perfect too.

1

@Nanosync

Posted

@jomefavourite Thank you for the suggestion! I'll modify my solution accordingly.

0

@jomefavourite

Posted

You're welcome, I'll advice you use rem or em instead of % too @Nanosync

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