Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


MeridithBP

Question

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?

Link to comment
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...