Responsive resizing image block columns from 3 to 2

Site URL: https://hyperboloid-finch-3kll.squarespace.com/work

I have a page with three columns of individual image blocks, each with a hover-over caption (I need this function, hence why I didn't use a gallery block instead). The captions all fit within the image on larger screens, but do not fit when the screens are smaller (eg. between 15" desktop and mobile resolution) - so it ends up creating a "scrollbar" in the overlay. I want to avoid resizing the caption text because it would be too small to read by the time all the text fits inside the image container again.

I want to add some custom code so that the three columns turn to two columns in tablet/smaller laptop screens - this means the images should remain large enough to contain the captions in full. How do I do so?

The password to the test site is "preview". Thank you!

35 minutes ago, salondaome said:

Site URL: https://hyperboloid-finch-3kll.squarespace.com/work

I have a page with three columns of individual image blocks, each with a hover-over caption (I need this function, hence why I didn't use a gallery block instead). The captions all fit within the image on larger screens, but do not fit when the screens are smaller (eg. between 15" desktop and mobile resolution) - so it ends up creating a "scrollbar" in the overlay. I want to avoid resizing the caption text because it would be too small to read by the time all the text fits inside the image container again.

I want to add some custom code so that the three columns turn to two columns in tablet/smaller laptop screens - this means the images should remain large enough to contain the captions in full. How do I do so?

The password to the test site is "preview". Thank you!

@media only screen and (min-width: 768px) and (max-width: 1192px) {
    #block-yui_3_17_2_1_1603916673890_43880 +.row .span-4 {
      width: 50%
    }
  #block-yui_3_17_2_1_1603916673890_43880 +.row .span-4 .image-caption-wrapper {
    padding: 5px;
  }
  #block-yui_3_17_2_1_1603916673890_43880 +.row .span-4 .image-caption-wrapper p {
    margin-bottom: 5px;
    line-height: 1.2em;
  }
}

8 minutes ago, bangank36 said:

@media only screen and (min-width: 768px) and (max-width: 1192px) {
    #block-yui_3_17_2_1_1603916673890_43880 +.row .span-4 {
      width: 50%
    }
  #block-yui_3_17_2_1_1603916673890_43880 +.row .span-4 .image-caption-wrapper {
    padding: 5px;
  }
  #block-yui_3_17_2_1_1603916673890_43880 +.row .span-4 .image-caption-wrapper p {
    margin-bottom: 5px;
    line-height: 1.2em;
  }
}

This works perfectly! Thank you so much!!

Hi @bangank36, sorry to bother again but I got this new weird issue where the right-most column stacks after all the other images... and only in one column (see attached screenshot). I don't think it has anything to do with the code, but rather the way I reorganized/moved several images? I've tried rearranging the entire set of images again but can't seem to get rid of the problem.

Could you move the last image block to the first column?

1 hour ago, bangank36 said:

Could you move the last image block to the first column?

I've moved everything back so the "wall" is complete, however the problem persists!

Let's share your site access I will have a look bangank36@gmail.com

31 minutes ago, bangank36 said:

Let's share your site access I will have a look bangank36@gmail.com

Just sent you an invite. Thank you!