3 Column preview component using html, css and flexbox

Community feedback

• 

  Sean Dickinson•135

  @atinybeardedmanPosted over 3 years ago

  This looks good. Here are a few suggestions:

  1. I think you could swap out a div for a span element for your logo. If you inspect it, you'll notice the child svg is actually expanding outside the span since the span element is inline and doesn't calculate it's width and height based on it's children the same way as a block level element.

  2. Your mobile solution doesn't have the white space around the cards as shown in the preview. A better solution than using flex-wrap is to explicitly change the flex-direction to column when you hit the mobile breakpoint. Then you can set a max-width to 90% or something similar on the cards to get that padding.

  3. I don't think you should be adjusting the height manually for the mobile breakpoint, rather just adjust the padding. Setting explicit heights for something like this is bad practice in case the content changes and then you run into overflow problems.

  0
• 

  Андрій Рогов•1,155

  @Andrii-RohovPosted over 3 years ago

  Hi, nice solution. You can improve it by adding cursor: pointer; to buttons.

  0