Summary Block Coding (Mobile) - Images per row

Site URL: https://tortoise-dove-xgz3.squarespace.com/

Hello SS community,

I am working on a team page and I am using a summary block to display each members profile picture - I have found some code that allows me to have 3 images per row on the mobile view which is great. 

However, I encountered a slight problem when I gave the images titles + descriptions - This adds a bottom margin to each image and consequently pushes the below images further down the page.

Example: https://gyazo.com/820812f30aec47f0c3aa680fef7c9515 <- The image blocks have been pushed further down the page.

Here is an example of the margin I am referring to (Orange block): https://gyazo.com/d19155634c7f38790c7552722d177f9c I have managed to code the orange and make the bottom margin 0px, however this is just for that single image and not all the images withing the summary block. So when I thought I had fixed it, I added a title + description to the second image and it caused the same fault, pushed everything down the page.

Unfortunately the code doesn't apply to the other image blocks - I was wondering if anyone with a bit more skill than me can help me with targeting all the images within the summary block and not just one.

Please message me if you need password access to my site.

Thanks for help!

What is access password?

@tuanphan I have just messaged you, thanks sir 🙂

Sent answer

<style>
  @media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
}
  }
</style>

Legend ^