Skip to content
Submitted about 2 months ago

Blog review Solution using hover

id-nynt•80
@id-nynt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I finished this challenge much quicker than the last one, which made me feel so happy

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

The review page kept showing some margin additional space and scroll bar. I tried to find a solution online and then I change the position of the footer from absolute to fixed. If there is any recommendation, please help me. Thank you!

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

I have some concerns in my code:

  1. About the cover image which was cropped in the design, I use a fixed height and object-fit: cover to crop it. Is there any other way to specify height according to width?
  2. As the challenge above, is there a way to keep the footer position: absolute but the scroll bar will not appear? Or is there another way to layout the footer at bottom?

Community feedback

  • Manuel Stolze•180
    @manuelstolzePosted about 2 months ago

    Very nice solution! I like it.

    First, you submitted the style.css twice. One in the top-level and one in style/style.css

    About your questions:

    1. Your approach is the best way to handle this. If you want to match 100% of the image you need to cut the image in the right size and use it. So you don't have to handle the matching of the visable part.

    2. I cannot reproduce the issue. Tried it on Chrome and Safari. Both did'nt show any scroll bar.

    Marked as helpful
    0
    id-nynt•80
    @id-nyntPosted about 2 months ago

    @manuelstolze Thank you for your feedback! I'll remove the duplicate style.css file and try it on Chrome and Safari.

    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