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 columns with flexbox. mobile and desktop

@dselasea

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


I had issues with styling the image with the ceo image. it doesnt center on mobile. I would love some feedback.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge, Daniel! To center the CEO image you just need to reduce its size and add align-items: center; to the #ceo-image selector.

I'd actually recommend avoiding using IDs as CSS selectors altogether. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.

I'd also recommend taking a look at the accessibility and HTML errors and try resolving them.

Let me know if you have any questions. Keep up the great work! 👍

0

@dselasea

Posted

@mattstuddert Thanks. You've opened my eyes to some new light and i'm going to style my next project using class, attribute, pseudo, and type selectors. I'll resolve the issues.

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