Display a set of code blocks in two columns in mobile with Brine/7.0

Site URL: https://sparrow-opossum-cbnn.squarespace.com/about#our-team

I have built a "team" section on my client's 7.0 Brine site at https://sparrow-opossum-cbnn.squarespace.com/about#our-team (p/w: Melissa) that leverages code blocks to create a hover effect/light box for each team member. It looks great on desktop, but when you move over to mobile, because they are individual blocks, they stack in a single column. Since there are a lot of team members, this makes for a very long scroll, so I would like to have them stack in two columns on mobile screens. Is there some simple CSS I can use to target these blocks in mobile?

On 9/22/2021 at 3:04 AM, MeridithBP said:

Site URL: https://sparrow-opossum-cbnn.squarespace.com/about#our-team

I have built a "team" section on my client's 7.0 Brine site at https://sparrow-opossum-cbnn.squarespace.com/about#our-team (p/w: Melissa) that leverages code blocks to create a hover effect/light box for each team member. It looks great on desktop, but when you move over to mobile, because they are individual blocks, they stack in a single column. Since there are a lot of team members, this makes for a very long scroll, so I would like to have them stack in two columns on mobile screens. Is there some simple CSS I can use to target these blocks in mobile?

Add to Design > Custom CSS

/* Mobile team 2 columns */
@media screen and (max-width:640px) {
section#our-team .span-3 {
    width: 50% !important;
    float: left !important;
}
}