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



DanMo 120


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

This is a solution for...

  • HTML
  • CSS
View challenge

Design comparison


Solution retrospective

Someone who can guide me, I managed to make the design for mobile phones but when it comes to making the desktop I get disorganized I don't know where to arrange them use grid and it's a disaster hahaha someone who can help me

Edit: I see that it disorganized me in the naming of the classes and I assigned a class that harms everything, I do not want to throw more head at this so that is how I am crooked

Community feedback

Dave 5,245



Hey @DannyMolina - nice work here! The page looks good. I use a few tricks to deal with the issues on your page, it's worth finding an approach that works on these points as they come up a lot! Here's what I would to do improve things:

  1. Prevent things spreading out too wide on large screens.

There are many ways to do this but I set a grid on the body element, with three columns, as using a class selector as follows:

.center-content {
	display: grid;
	grid-template-columns: minmax(1rem, 1fr) minmax(375px, 1440px)minmax(1rem, 1fr);

.center-content > *  {
	grid-column: 2;

The 1440px is the max-width you want the main content to be, and the 1rem values is the smallest spacing you want either side of the main content on small screens (I sometimes put this to 0 and use a container to add padding to each section).

The second part positions all direct children of the body in this nicely sized middle column. In my case, mostly, my header, main, and footer the middle column, and stops them going wider than 1440px. It’s also pretty easy to ‘break’ elements out of this constraint if you need to.

Other people use container classes to do the same thing. This article has a good run down of alternative approaches You will note I am actually using the approach the author doesn't like! I am thinking of switching to the container approach.

Either way it's a good idea to find an approach that works for you as you'll need this for a lot of FEM challenges.

  1. Change the alignment of the buttons.

This can be done with flexbox. Firstly I would wrap the input and button in a div. And set the following on the div:

display: flex;
flex-wrap: wrap;
gap: 1rem;

I would then apply the following to the input:

flex-basis: 0;
flex-grow: 999;
min-inline-size: 70%

This combined with the flex-wrap on the parent means that the input will grow and shrink, but when the width hits 70% the button will wrap below. Then on the button add:

flex-grow: 1;
min-inline-size: 20rem;

This means the button will not be less than the size set (you could also use fit-content if you are feeling fancy!) I think that should work. You may need to play around with the min-inline sizes.

  1. Lastly you should add accessible name to the links listed in the report. This is probably most easily done by using aria-label. You can't have empty links with no accessible name as screen readers won't announce where the link will go.

Hope this helps!



PS If that flexbox stuff is a bit tricky, you could always use a media query and just change the flex-direction from row to column at narrow widths.


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