Jump to content

Stack gallery block on mobile (1 column)

Recommended Posts

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? 

Screen Shot 2022-05-04 at 1.14.21 PM.png

Link to comment
  • 2 weeks later...
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.