Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo landing page with two column layout solution

@MariaValentinova

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


It turned out to be much more challenging than I expected. I'll keep exploring to see if I can improve this work. I appreciate feedbacks with advice on how to enhance and adopt best practices.

Community feedback

P
Abbas Sher 440

@Abbassher55

Posted

You've done a great job! However, upon closer inspection, I have noticed a few issues.

  • There is horizontal scrolling on the website, indicating that it is not fully responsive. This scrolling problem persists across all screen sizes (desktop, tablet, and mobile views have been checked) and is specifically caused by the "Get early access today" and Footer sections.

  • It is noticeable in the design that the website should be full-width, with consistent left padding from top to bottom in every section. In your current implementation, this consistency is only present in the last two sections.

  • I also observed the use of the "vw" unit in the CSS file for both the body element and the "principal__item__signup" class, accompanied by applied absolute positioning. My suggestion is to set the width to "auto" in these instances.

    Commenting out these lines may reveal differences,

    background-color: var(--desaturated-blue);
    /* width: 100vw; */
    position: absolute;
    padding: 3.4rem 2rem 6rem;
    .... .... .... ...
}

There may be no need for absolute positioning on "principal__item__signup" if the sections are adequately separated, and the design fills the entire screen size with only inner padding.

In addition to addressing these concerns, I want to commend you for the great job you have done. I encourage you to maintain this level of excellence and keep up the Outstanding work!

Marked as helpful

0

@MariaValentinova

Posted

@Abbassher55 Thanks a lot! I really doubt about how it should be done correctly. I had many doubts all the time through I was realising this challenge. As soon as I can get some time, I'll try to improve this code. I appreciate very much your help!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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