Skip to content
Submitted 5 months ago

article preview javascript

tortaruga•450
@tortaruga
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

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•270
    @MukarramHaqPosted 5 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

    0
    tortaruga•450
    @tortarugaPosted 5 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!

    1
    Mukarram Haq•270
    @MukarramHaqPosted 5 months ago

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

    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