Submitted 3 months ago

article preview javascript

tortaruga• 450

@tortaruga

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud to have completed the challenge, but I think there was a simpler way to do it

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

javascript didnt work on the live website, but it got fixed by adding a dot before the file path

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

any critique is welcome

Community feedback

Mukarram Haq• 230

@MukarramHaq

Posted 3 months ago

Good job, bro

I have a question? How did you stop the image from stretching? If you look at my project, it stretches and looks ugly. I would appreciate some help with that

tortaruga• 450

@tortaruga

Posted 3 months ago

hi @MukarramHaq, for the image I used a div instead of img and set the image as its background, then I gave the div a width of 100% and an aspect-ratio of 16/9, that way it doesn't stretch!

.article-img {
    background: url(./images/drawers.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    aspect-ratio: 16/9; 
}

I also change the flex-direction of the card to column for smaller screens. hope it helps!

Mukarram Haq• 230

@MukarramHaq

Posted 3 months ago

@tortaruga that solve my issue. Thank you so much for the help!

Please log in to post a comment

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