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

Stack gallery block on mobile (1 column)


Question

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

4 answers to this question

Recommended Posts

  • 0

Use this CSS

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

 

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

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

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