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

P

@wonderlust101

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Cosaldi

Posted

The button not perfectly circle, please add this code if you like

height: 30px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;

and remove the padding in button class.

Good job!

0

P

@wonderlust101

Posted

@Cosaldi I am aware of this. If I apply your code, it looks kinda off even though it is technically aligned in the code. I coded it the way it is so that it looks optically aligned.

Learn more about it at it this link.

I am aware that the article refers to print but it can also apply to digital design. If I could make my button a complete perfect circle, I could have taken my time to fine adjust it to:

padding: .5rem 0.6095rem;

Which will set my button to be a radius of 34.5. With the SVG a width of 14.996 and a height 18.500, if you try to center it will look off, so I off set it by reducing the padding to the height and increasing the padding to the width. This will make the SVG more optically centered.

0

@Cosaldi

Posted

@wonderlust101 ah i see, thanks by the way for the link.

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