GrahamRoper

On 3/3/2023 at 8:51 AM, Beyondspace said:

Ohh, it 's my bad. You can try the following one

/* stack gallery grid on mobile except About page*/

@media only screen and (max-width: 640px){
  body:not(#collection-63f2f994f2c62a3fadc044d3) .sqs-gallery-design-grid-slide {
    width: 100% !important;
    clear: none !important;
  }
}

Support me by pressing 👍 or marking as solution if this is useful for you

That solved it. I greatly appreciate your help!

7 hours ago, Beyondspace said:

You can change your code to this

/* stack gallery grid on mobile */

@media only screen and (max-width: 640px){
  #block-yui_3_17_2_1_1676869686592_8178 .sqs-gallery-design-grid-slide {
    width: 100% !important;
    clear: none !important;
  }
}

Support me by pressing 👍  or marking as solution if this is useful for you

Unfortunately that didn't work. That changed all my mobile galleries back to grid instead of stack, EXCEPT the "about" page gallery. So basically the inverse of what I'm going for. I'm guessing you isolated the "about" page gallery block?

I've added css to convert all galleries on my site from grid to stacked when viewed on mobile (see css below). Unfortunately this has created an undesired look on my mobile "about" page. How can I modify this css or add more to keep the original grid layout for only the "about" page on mobile? Thank you in advance.

Page link: https://grahamroper.com/about
Password: utah

/* stack gallery grid on mobile */

 @media only screen and (max-width: 640px)
  {.sqs-gallery-design-grid-slide {
      width: 100% !important;
      clear: none !important;
  }
  }

On 2/27/2023 at 3:19 AM, tuanphan said:

It is fine to me. Can you take a screenshot of blank spaces?

I was able to fix the issue by deselecting "apply minimum height" under Index: Page options in design styles. I then simply added spacers manually to create a fixed height to mimic the default look.

I appreciate the help nonetheless.

On 2/27/2023 at 3:19 AM, tuanphan said:

It is fine to me. Can you take a screenshot of blank spaces?

Sure thing. See attached.

Again, only seems to be an issue on index pages, but they're prevalent in this site.

@tuanphan I used the above suggested CSS to remove parallax scrolling from my site. It worked, but now there are blank spaces between the banner images on mobile index pages. Any suggestions to correct this?

https://grahamroper.com/photo
Password: utah