Skip to content
Submitted 11 months ago

News Home Page - Sass

eosook•130
@eosook
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

When playing around with the screen widths, I find a lot of the times a lot of my elements will have their content bleed over their box, like text going over their given height, when the screen is at certain widths.

How do you generally approach a problem like this? Do I need to make multiple media queries so that it looks better when it hits those dimensions or are the units i'm using for those elements not optimal.

Community feedback

  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @eosook congrats on completing this challenge🎉🎉

    You're solution looks pretty good👍. Generally when I find myself into the issue you've described. I'll never go to media queries for the solution of such a problem. Most likely I'll use max-width if the content is overflowing or clamp if the font-size of the property is causing issues. Most of the time I find myself using max-width so the content doesn't bleed or overflow. I exactly don't know what element caused you the issue. But looking at your solution I'm guessing that the image might caused you some problem. 'Cause you haven't set max-width: 100% on to your image. Always reset your images using these properties,

    img, svg, canvas {
max-width: 100%;
display: block;
}

    I hope you found this helpful👍👍

    Keep up the good work and have a very nice day😄

    Marked as helpful
    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