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

Mobile first site using HTML CSS and JS

@iucsim

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


Hello everyone!

This was so much fun challenge! I used gird place-item: center short-hand property for centralize everything. While making this challenge I was getting confused by giving width to article element. What I've done here is initially I assigned width: 320px for article element and for media query I changed it to width: 720px. Is it is good practice or there are some other way to do this.

Feedback is appreciated!

Happy Coding:)

Community feedback

T
Grace 30,770

@grace-snow

Posted

Hi,

This looks really nice. I find the source of the animation a bit strange on the desktop version, but that's just preference I think. I'd rather see it increase in height or something so it moves in from the button position, whereas atm it seems to rise up from a position below the button...

In answer to your question though, I think all you need is max-width for the card. That's fine to be in pixels or rems.

And you can adjust it in media queries, but you may find you don't even need to.

A the best

1

@iucsim

Posted

Hi @grace-snow,

Thank you so much for your feedback. I really appreciated it. I've fixed the animation effect it's look great now.

Have a nice day, :D

1
T
Grace 30,770

@grace-snow

Posted

@iucsim nice work! 🙌 It looks great

0
Zana 180

@Zana994

Posted

Hello, it is always better to use width in percentages for responsive design.

0

@iucsim

Posted

Hello Zana,

Thank you so much for your feedback!

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