All solutions

How could I make my code cleaner and more concise?

I got lost so many times when I was styling the page, because I struggled to keep track of certain elements. I had to use borders to identify the element I was looking for!

I don't find it easy to name classes effectively.

Anyone willing to guide me? I would be so grateful!

Thank you!

Any feedback would be greatly appreciated! Many thanks!

Hi!

I implemented Grid on my .sections.

In my media query for larger screens, I then used Flexbox's align-self: center to center the .tools-sup and .tools-calc in their respective column.

• Is that a correct method or is there a better way?

I also set a height on all four .tools otherwise the containers would have different sizes as their content varied.

• Should I use a different property than height or min-height in my code to make those sections the same height when the webpage is displayed on wider screens?

I hope this makes sense and that someone will be able to assist me...always grateful for the help and guidance! :)

I am pretty sure I 'cheated' my way around the positioning of the testimonials and the star ratings. I used grid, flexbox, position but not the way I should, I don't think.

Any suggestions on how I could have positioned my elements in a cleaner way?

Thanks!

I desperately need to understand how to use the position property.

I really struggled with the top and bottom background images.

Also, there is too much whitespace at the bottom of my card. 0 padding and 0 margin so I know this is down to me using the position property on some elements but I can't figure out what needs to be corrected.

I would be so grateful if someone could help me out!

I think I should have used Grid or exploit Flexbox more than I did but I feel intimidated at the thought of using those properties, yet I know they would simplify my code.

Also, I didn't know how to change the size of the .icon-img to match the template.

Could anyone give me a few pointers on how I could have coded this design more effectively using either Grid or Flexbox...or both?

Many thanks!

I would be grateful for any feedback!

The overlay image was a real challenge for me. It took me two days to figure it out...with the help of solution submissions! I will need to study the code in question before I can move on to the next challenge because I feel like I haven't fully grasped the principles behind it :(

I really struggled with the mobile version.

1. Which properties do I need to use to make the hero-img fit inside its parent? It would either spill over the parent div, or not fully stretch horizontally/vertically, and all sorts of mishaps. I found a way to make it work but I'm sure there is a 'cleaner' way!

2. I used the properties border-top-left-radius: 10px; and border-bottom-left-radius: 10px; to match the original design. I think I cheated my way around it! Should I have structured my HTML differently so that the hero-img automatically inherit the border-radius property of its parent?

Thanks!

Hi everyone! I am not convinced of my solution!

1. In order to be able to center the .container div both horizontally and vertically using Flexbox, I set min-height: 100vh on the body. It was a shot in the dark which seems to be working. Could someone remind me of the role of height in relation to flexbox? I've not fully grasped it.

2. I gave that same .container div margin: 100px auto as I also wanted free space at the top and bottom. Is that correct or is there another way?

3. I didn't set a width on the body as it didn't seem to make much difference. Should I have done?

Many thanks!