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

Four card Feature using only float

@Aksharmeet

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Your feedback is appreciated

Community feedback

@C-likethis123

Posted

Some comments:

  • Instead of naming your divs 'module1', 'module2', try to have more descriptive names for your HTML elements. For example, you can name them "text-content" or "features". CSS shorthands:
  • For lines 104-107 of index.css, you can specify two values instead of four values: #module1 { padding: 0px 270px; } This has the same effect as your current code, but with less values specified.
  • Same thing for line 98, which can be simplified to margin: 2em;
  • For more information, google about CSS shorthand syntax for paddings/margins.

Font sizes:

  • I personally found 1.3em too large on a screen size of 1440px, and preferred 1em instead.

Responsive design:

  • The website switches to mobile layout on screen sizes less than 1440px, which to me is too large a breakpoint. There are laptops that have a screen size of >1000px, so the mobile layout looks too stretched out on these screen sizes. I recommend to google the common breakpoints and experiment with a suitable breakpoint to switch to mobile layout.
1

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