3-column-preview-card-component-main CSS/Flexbox/Responsive

Community feedback

• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  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 ! 😃

  1

  ---

  

  Glen•515

  @GlenOttleyPosted over 3 years ago

  @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!

  0
• 

  Eddy Cerpa•145

  @edycerpaPosted over 3 years ago

  Hi Glen, I'm just starting with this type of challenges, and I'm a newbie, but I think i can help you with the buttons issue, you can use position:absolute; to your buttons, and position:relative; for their containers, then you can use bottom:15px for example and they will stick to the bottom of the container.

  0

  ---

  

  Glen•515

  @GlenOttleyPosted over 3 years ago

  @edycerpa Thanks Edy, I did try this but it did not work for me, turns out the solution was to add height: 100% to my .container class. I also made them into flex containers as Rayane suggested above, so this may have been part of that solution, however the height: 100% was necessary to make it work correctly.

  0