CSS for changing gallery type on single page

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

17 hours ago, GrahamRoper said:

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

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

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?

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!