How can I increase mobile breakpoint and force the gallery to switch to single-column mobile layout at more than 640px?

Currently, my gallery switches from desktop layout to single-column mobile layout at 640px or less. I would like it to switch to mobile at 767px or less. Is it possible to achieve that with CSS?

My website URL: https://alan.photo

Thank you in advance.

14 minutes ago, Aurmont said:

Currently, my gallery switches from desktop layout to single-column mobile layout at 640px or less. I would like it to switch to mobile at 767px or less. Is it possible to achieve that with CSS?

My website URL: https://alan.photo

Thank you in advance.

try

@media only screen and (max-width: 768px) {
  .collection-type-gallery .grid-wrapper {
    height: auto !important;
  }
  .collection-type-gallery .grid-item-wrapper {
    position: static;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 10px
  }
}

Thank you, BaNgan.

Question for you (or anyone):

There's a code in one of the JS files that determines various mobile breakpoints:

var n = {
        isAuthenticated: document.documentElement.classList.contains("authenticated-account"),
        debug: !0,
        mobileBreakpoint: 640,
        tabletBreakpoint: 1024
    };

Is there a way to modify the above code through some sorta custom JS code workaround? Squarespace allows you to inject custom JS in the page header.

47 minutes ago, Aurmont said:

Thank you, BaNgan.

Question for you (or anyone):

There's a code in one of the JS files that determines various mobile breakpoints:

var n = {
        isAuthenticated: document.documentElement.classList.contains("authenticated-account"),
        debug: !0,
        mobileBreakpoint: 640,
        tabletBreakpoint: 1024
    };

 

Is there a way to modify the above code through some sorta custom JS code workaround? Squarespace allows you to inject custom JS in the page header.

Interesting, I am looking for more insight from others about this as well