Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article preview component with HTML , CSS , JS

Abhikβ€’ 4,840

@abhik-b

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have used javascript for some animations however I guess my code can be improved ! Any feedback will be appreciated πŸ˜‡

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hey, Abhik Bhattacharya! πŸ‘‹

Nice work on yet another challenge! πŸ˜†

A few tips I might suggest are,

  • Adding cursor: pointer to the social media popup button.
  • Adding a max-width to the card component to prevent it from becoming too wide on extra-large screens.
  • Adding object-fit: cover to the image so that it is cropped and does not distort when the page is resized.
  • Adding a little bit more space around the text content of the card component in the mobile layout to give the content some room.

Keep coding (and happy coding, too)! 😁

2

Abhikβ€’ 4,840

@abhik-b

Posted

Hi @ApplePieGiraffe πŸ˜€

Once again your valuable feedback helped me improve , I did not know about object-fit previously

Thanks to your tips now my site looks even more beautiful

Happy coding & keep showering you valuable feedbacks πŸ’―

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@abhik-b

Just took another look, and the image looks much better now! Keep it up! πŸ‘

1
Abhikβ€’ 4,840

@abhik-b

Posted

@ApplePieGiraffe Thank you

0

@axevldk

Posted

Hi, Abhik Bhattacharya ~

I have studied your work here. Great work, especially I like your animation on social icons for mobile. πŸ‘ Here are really tiny opinions for your work.

Under 375px, responsiveness goes weird. Especially on iPhone5 size. It could be a flaw in your wonderful work. And there are 2 empty srcset attributes on your markup. That's all.

Happy coding ~ ✨

2

Abhikβ€’ 4,840

@abhik-b

Posted

Hi @axevldk Thank you very much for your humble opinion , I have deleted those empty srcset attributes and I would try my best to make this responsive on Iphone 5 as well.

Happy Coding πŸ˜‡

0
Guy Ezraβ€’ 615

@ezraguy

Posted

Hey @abhik-b, great job!

I have 2 suggestions:

  1. like @axevldk said around 300px width the text in the card starts to overflow.

  2. In the 1023px breakpoint I would make the card's width around 55% percent because, in my opinion, 80% percent looks a bit stretched and I would add min-width to the card.

@media screen and (max-width: 1023px)
article {
    grid-template-areas:
        "image image"
        "details details";
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
    height: 70%;
    width: 55%;
    min-width: 300px;

other than that it's great!

1

Abhikβ€’ 4,840

@abhik-b

Posted

Hi @ezraguy Thank you for your kind feedback

  • I tried to make that card as responsive as possible by me
  • I also tried your suggestion and now it looks a lot better

Thanks for your tips I really forgot about min-widthπŸ™

1

Please log in to post a comment

Log in with GitHub
Discord logo

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