Stack gallery block on mobile (1 column)

Site URL: https://www.stickelsservice.com/about

Hey there! I'm having trouble finding a solution to the way my client's About page displays on mobile. They specifically wanted the founders on top (centered) followed by 3 rows of staff. Since they wanted it set up this way, I reworked it from a gallery section to a blank section with 4 gallery blocks and added this CSS to center it:

/* Center headshots */
body#collection-62265dff26fd182434bb01e6 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    justify-content: center;
      flex-wrap: wrap;
}

I can't for the life of me figure out how to get the headshots to stack on mobile into one column. See attachment for how it's displaying now. I was able to successfully stack the gallery section from the Services page: https://www.stickelsservice.com/services but not having any luck with the About page. Any ideas? 

Use this CSS

/* about mobile */
@media screen and (max-width:767px) {
div#page-section-626c2bc634491911a2ce5bca .slide {
    width: 100% !important;
}}

Loved this! worked for me as well.
Can I ask you how to adjust the vertical padding between the images?

21 hours ago, elenadesign said:

Loved this! worked for me as well.
Can I ask you how to adjust the vertical padding between the images?

It looks like she removed gallery from above page so we can't check it. Can you share link on your site?

Or try this code first

/* about mobile */
@media screen and (max-width:767px) {
div#page-section-626c2bc634491911a2ce5bca .slide {
    width: 100% !important;
	margin-bottom: 10px !important;
}}

@tuanphan that worked! Thank you so much!