Solution with Flexbox

Community feedback

• 

  Mark Gardner•190

  @mark-gardner74Posted about 2 years ago

  Nice, two tiny observations. The 2 column layout has almost no gap between verticals. One way I saw around this was to have two boxes for each element, with the outer box being 100% - 50% - 33% of width dependent on mobile - tablet - desktop. Within the box, you have the content with padding so that you can create a gap inside the box and maintain space. It also helps when you use flex-wrap to keep the columns in the correct configuration. gap-row may also be handy to give a slightly different gap between the vertical and horizontal boxes.

  The second, truly tiny thing is that the first box with the text "Check out..." drops slightly lower than the others in the two-column layout.

  Nice though. All the best for the next project!

  Marked as helpful

  0