Skip to content
Submitted 7 months ago

Responsive Article Component Preview using HTML,CSS and JavaScript

KrishnaPoddar1•400
@KrishnaPoddar1
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?

Utilizing JavaScript For the first time in a Code.

Try to be more precise with my CSS styling and javascript implementation

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

The first thing was the JavaScript utilization as it works at times and it doesnt even though the code written is complete in my opinion.

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

1.As I mentioned that there are some times when the JavaScript Functionality doesn't work at all but the next moment it does. Even in the code I have submitted it is showing the same issue. Do guide me on that.

2.The CSS toolkit section utilized two different designs for two different views. I had a lot of issues developing it and I don't think that it is perfect to this point. So I would love to hear any advice and tips to work along that.

3.As you can see the image that is in the desktop view doesn't take up the full view even after I have specified it to be 100% in both width and height along with the background-size set to contain. I tried to look for solutions to tackle this but everything I tried resulted in the same output.

These are some issues I had and would love to get feedback on. ANy other tips/Advices would be valuable.

Community feedback

  • Koda👹•3,830
    @kodan96Posted 7 months ago

    hey there! if you apply this set of instructions on the body your card should be centered vertically:

    ` body {

    min-height: 100vh
display: flex
align-items: center

    } `

    (I guess you don't need justify-content: center in there, since you have margin: 0 auto )

    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