Skip to content
Submitted over 4 years ago

Responsive Article Preview

Sudharson•70
@Sudhar611
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Please provide your valuable feedback for the below questions. These questions are based on the problems that I faced while developing the solution.

  • Are my size, spacing and positions correct for all the elements?
  • How to find out the correct font family from an image ?
  • I have used float to display the image on the left of the content. I tried to align it using inline but it was not aligned on the same line. The content was intended below the image. Is it possible to achieve this using inline ?
  • It took me a while to figure out the Share pop up to be responsive for all the screens. Is there any other way it can be achieved other than my solution ?

Community feedback

  • Ovidiu-Antonio•3,125
    @ovidiuantonioPosted over 4 years ago

    Hello,

    Very nice solution! You've done a very good job! The site is responsive and it looks good! These are my answers to your questions:

    • the size of the card, and also the size of the elements inside of it, is very good, you can position the card better using these 2 properties: left: 50%; (to push the card in the right side) and then transform: translateX(-50%); to move it back by 50% of the card width. This is the best way to align something that is positioned absolute.
    • you have the font family specified in the style-guide.md file
    • you've done a good job with float, in the future I recommend you learn about css grid and flexbox
    • to make it responsive you write a media query for it as you modify the card, if necessary.

    Happy coding! Keep going!

    2
    Sudharson•70
    @Sudhar611Posted over 4 years ago

    Thank you for you valuable feedback and encouragement!

    The positioning tip works as a gem. Sure, i will look into grid and flexbox.

    0

Please log in to post a comment

Log in with GitHub

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