Skip to content
Submitted almost 3 years ago

Frontend-Mentor-Blogr using HTML CSS JS

PhoenixDev22•16,950
@PhoenixDev22
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blogr landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello community, I've completed another frontend mentor , I had a challenging time making it.

I have a question about setting max-width to body that the website doesn't stretch all on larger desktops (more than 1440px) , and the design messes up.

Any suggestions about the accessibility?

Please share your thoughts !There’s still some more to do like the readme, cleaning up repeating code, and html warnings.

I'd appreciate any comments for improvements or anything I've missed. Thank you!

Community feedback

  • GrischK•140
    @GrischKPosted almost 3 years ago

    Excellent job, it looks very similar to the original design and the responsive is nice.

    Marked as helpful
    0
  • Chamu•13,130
    @ChamuMutezvaPosted almost 3 years ago

    Greetings PhoenixDev22

    • you asked about setting a max-width on the body, you don't need to do that as the body represents your viewport. You can have a wrapper div that will be the only child of the body containing all the other elements, you can then set the max-width on that container . eg
    <body>
         <div class="container"> 
                 <header> header content here </header>
                 <main>main content here </main>
                 <footer>footer content here</footer>
         </div>
</body>

// css
.container {
max-width: 90rem;
}
    • there is an overflow of the content caused by the images , check on desktop. Add overflow-x: hidden; on the body element
    Marked as helpful
    0
    PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    @ChamuMutezva Thanks a lot , I will take your suggestions on board .

    0
  • Ahmed ibrahim•370
    @Ahmedhassanin12Posted almost 3 years ago

    you did it well 👌✔

    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