Four Card Feature Section

What are you most proud of, and what would you do differently next time?

I'm happy that I took this challenge. I learnt many new things doing this challenge. Next time, I will be little more careful when assigning the values to properties. I will try to use responsive values rather than using rigid, fixed values like "px" or "rems".

What challenges did you encounter, and how did you overcome them?

The very first challenge that I encountered doing this challenge was obviously the layout. The design look easy when I first had a look on it. But It gave me a tough time deciding the display property. I chose to go with grid. It could have been done with display flex as well which I realized later when I finished the project. But I like the idea that I think that there's other way of doing it.

So I went with the grid layout: I let the layout be responsive by using display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));. This property allows the layout to be responsive. It pushes the content as per the size of its parent element. So each column will have width of 230px and if there's space for the another column of the same size it will add up there and so on. This is what I used for the middle screen-resolution which sets between the mobile and desktop. Just make it more responsive as the screen sizes changes, instead of a quick snap which looks kinda weird.

For the desktop layout, I positioned the three elements in the same row and only one in the second row. First, second and fourth elements sits in the first row and third element sits on the second row and second column. And the I used the position relative to the first and fourth element and gave them top: 50%; to push them down in the middle of their relative position. And that matches with the given design in the challenge.

What specific areas of your project would you like help with?

I want to know that why do only the calculator element is squeezed when the screen sizes decreases while others don't shrink. I couldn't figure that out.