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

Responsive four-cards-features

OJAYcode 20

@OJAYcode

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Dreamleaf 230

@Dreamleaf

Posted

Great job, just a small note about using css shorthand when declaring things.

A good example is on your cards where you specify values for padding and use: padding-top:30px; padding-bottom:30px; padding-left:30px; padding-right:30px;

If they are all the same you can simply use: padding:30px;

If you wanted the same top and bottom and a different value (but the same) for left and right you could: padding: 30px 10px; The first value refers to top and bottom, second value is left and right.

If all sides wanted different padding, you can: padding: 30px 20px 10px 5px The order here is important and good practice to understand it. The first is TOP The second is RIGHT The third is BOTTOM The fourth is LEFT So, padding: top right bottom left;

There is also a way to specify different top and bottom, and have the same left and right. padding: top leftANDright bottom; which is padding: 30px 10px 60px.

Hope that helps, it can be used for other attributes such as margin as well, much quicker to write and keeps it all easy to read.

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