Skip to content
Submitted 5 months ago

Article Preview Component using basic HTML, CSS & JS

BozJR•260
@BozJR
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Im most of proud of being able to complete this but it was difficult in terms of figuring out the JS and then putting my thoughts onto the code. got there in the end with some help.

What challenges did you encounter, and how did you overcome them?

using the JS and getting it to do what i wanted.

What specific areas of your project would you like help with?

Just need more practical PRACTISE with JS.

Code

Please log in to post a comment

Log in

Community feedback

  • Jay Khatri•4,230
    @khatri2002

    Hi! The developed solution looks great and satisfies the requirements for both desktop and mobile resolutions! Just a few UI suggestions to bring it closer to the design reference:

    1. Center Align the Card

    To center align the card properly without relying on margins, apply the following styles to the <main> element:

    min-height: 100vh;  
display: flex;  
align-items: center;  
justify-content: center;

    This approach eliminates the need for any fixed margins, ensuring consistent centering across different screen sizes.

    2. Fix the Stretched Image Issue

    If you notice the drawers image in the given design reference for the desktop resolution, it is maintaining its aspect ratio while being cropped only on the right side, not equally on both sides. However, in the current solution, the image seems stretched due to fixed height and width.

    Steps to Fix:

    • Add the following property to ensure the image maintains its aspect ratio:

      object-fit: cover;

      This ensures the image adjusts to the provided dimensions while keeping its aspect ratio intact.

    • To crop the image only from the right side (as seen in the design reference), add:

      object-position: left;

      This shifts the focal point of the image to the left, ensuring the cropping happens primarily on the right side.

    Why These Adjustments Matter

    These minor adjustments align the design more closely with the provided reference. Observing such details train your eye for pixel-perfect design, which is a valuable skill.

    Keep up the great work! You're doing an excellent job! 🚀

    Marked as helpful
  • Mohamed Ragheb•560
    @mohamed-fm

    Great code! However, you might want to avoid giving the article__content-container a height property. This will allow it to adjust automatically for smaller screen sizes and will help resolve the issue with the mobile-social-sharing-bar, making it stick to the bottom.

    Additionally, you can use overflow-x: hidden; on the body and correctly position the share-shape-container to prevent any overflow. Overall, it's excellent code!

    Marked as helpful

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