Skip to content
Submitted over 3 years ago

HTML Markup, Flexbox, Mobile-first workflow, JavaScript

Lidia•180
@LidiaRJ
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

Hi everyone! I have struggled with some parts of this challenge, specially with the positioning of some of the overlapping elements. I had some issues with the desktop version of the challenge since a white space was showing up on the right side of the screen. I managed to "fix" this applying overflow-x: hidden; in the body tag. I can't figure out why this was happening and my code might show some problems adapting to different screen sizes. I would appreciate some feedback on these issues. Thank you!!

Community feedback

  • Isaay•25
    @jakubserwinPosted over 3 years ago

    You definitely misplaced your solution or attached wrong file but its ok.

    The problem with the white space on the right side was probably because one or more of your elements had fixed width and was overflowing your body. Your solution manage to hide it but probably cut it as well. For testing purpose you could add a red border for your body and take a close look which element will extends it.

    0
    Lidia•180
    @LidiaRJPosted over 3 years ago

    Hi @Isaayy! I know, I realized afterwards but I couldn't figure out how to remove it. I upload the solution again but in the right place.

    Thank you so much for your feedback, this is so helpful! Hopefully that will help me find the element that's causing the problem.

    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