Sunnyside agency landing page using Flexbox, CSS Grid and JavaScript

Community feedback

• 

  Kemystra•200

  @Kemystra

  Posted almost 2 years ago

  Another way you may consider is to ditch the use of padding for class service-content. Instead, set the property justify-content to flex-end. All of the text will then go to the bottom, and you can set the gap between them with the gap property (or just use margin, I guess). This guarantees your text to not overflow due to lack of empty vertical space.

  To do that however, you need to have a fixed height for the services-item class. One trick that I used is to set the aspect-ratio to be the same as the background-image's aspect ratio. For example, if the image is 400x500 in resolution, then I will do aspect-ratio: 4 / 5. This will maintain the div's proportion to the image.

  11

  Marked as helpful
• 

  Ogunsanwo David Oluwadamilare•580

  @ogunsanwodavid

  Posted almost 2 years ago

  Alright, The best way to achieve this is to create a div (wrapper) with the respective images as backgrounds and then create another div inside containing all the texts and give it margin-top:auto so they can be always positioned at the far bottom. You should also give the wrapper or container a padding so the texts dont sit right on the bottom of the wrapper. I hope this helps.

  01