@RayaneBengaoui
Posted
Hello Glen,
Congrats for completing your first challenge ! 🙂
Why don't you want to make your containers "flex" ?
By adding display: flex, flex-direction: column, align-items: flex-start and justify-content: center I think it solves your problem ?
Also, There is no need to add border-radius to your color classes as you can directly declare it on row. However, it will not work directly because the edges of row will be rounded, but the cards will overflow it and we won't see the change. To avoid this, you can also add overflow: hidden to your row that will not display everything that overflow the it.
Lastly, you don't need special sections with color names. You could just combine classes to have container orange, container cyan and container darkcyan. It would simplify your code and make it easier to work with.
Overall, well done for the challenge and happy coding ! 😃
@GlenOttley
Posted
@RayaneBengaoui Thanks for your suggestions Rayane, you are right I was making life difficult for myself by not using display: flex on my .container class. However the flex additions alone did not fix the issue with the buttons floating up as the paragraph height changed. The solution I found in the end was to give .container height: 100%.
Also thanks for the tip in regards to the borders, that worked absolutely perfectly!
Finally in regards to removing the individual color sections around each container, I did try this but it messed with the layout too much. I'm sure I could go back and correct that but I think I will leave that as is and learn from my mistake in future challenges, I'm excited to get on to the next one!
