Skip to content
Submitted 6 months ago

Blog Preview Card

Sumedha Koranga•70
@sumedhakoranga
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 felt great, after completing it. I will make more things. This is cool.

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

I am facing an issue, with overflowing.

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

In mobile view, my page is overflowing in the y-axis. I am not getting why. The reason was that if any element has more height than my viewport, then it may be possible. I used the developer tools, but couldn't understand why is it happening, Please help me with this. Thank you.

Community feedback

  • Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqPosted 6 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    PREVENTING OVERFLOW :

    • " In mobile view, my page is overflowing in the y-axis. I am not getting why. The reason was that if any element has more height than my viewport, then it may be possible. I used the developer tools, but couldn't understand why is it happening ", I think it may be caused due to default style rules which are applied for you solution by your browser during rendering website.
    • I see you have hardcoded values like margin: 0 and padding: 0 for body two times because of using media queries, I would suggest you to try Destyle.css.
    • Destyle.css is nothing but a stylesheet which helps us to get rid of every default rules applied for our website by browsers, more like a CSS Reset. this will results in building applications which is consistent across different browsers.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    1
    Sumedha Koranga•70
    @sumedhakorangaPosted 6 months ago

    Thankyou so much @0xabdulkhalid

    0
    Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqPosted 6 months ago

    @sumedhakoranga Glad you found it helpful ! 🤠

    0
  • Riktam Nandi•210
    @rdxnandiPosted 6 months ago

    Great Job Check your min-height property. The issue you are facing is because of that component.

    1
    Sumedha Koranga•70
    @sumedhakorangaPosted 6 months ago

    Thank you @rdxnandi

    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