Fylo-Landing-Page-with-Two-Column-Layout using CSS>Flexbox

Community feedback

• 

  P

  Dave•5,295

  @dwhenson

  Posted over 4 years ago

  hey @RITESH29-web 👋 nice work on this one! Looks great and you've got the design looking really good on desktop views. 🙌 Here's some small suggestions you might like to consider:

  1. At the moment the webpage stretches the full width of the window. This looks a bit strange on large viewports so you probably want to constrain it somehow. I use the approach of setting grid on the body with three columns, and then placing all the direct children in the middle column. You can the adjust the column widths to meet your needs.

  2. At small viewport sizes some of the contents starts to stick out of the page which is causing issues. One issue is the first form - but I think if you but the button inside the form and used flex on the form this would help. It would also help address some of the accessibility issues listed.

  3. The footer layout also looks a bit odd at small sizes. From a quick look I think you have some margin on the ul that you would probably want to adjust. in general, I would suggest doing the mobile layout first, and then adding margin as needed for larger viewports. I find this approach much easier.

  4. Lastly, don't forget that every input element needs a label. I often forget this, but if you don't see a label in the design you can always just include one and then add a visually-hidden class to it to hide it, while keeping available to scree readers. If you google this approach you'll find lots of suggestions and snippets.

  Great work - I really like what you've done with this one and keep it up!! Hope this helps. Cheers 👋

  21
• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 4 years ago

  Also a suggestion just to keep it semantic. At your html files, in the form, the button is suppose to submit it right? Well to keep it clear, you could make use of input type of submit instead of just a button right. Also you must include it inside the form tag, because in your markup, it is outside the form, hence when a user interacts with it, nothing will happen since it is not inside of form ^

  12