Jump to content

Responsive resizing image block columns from 3 to 2

Recommended Posts

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!

Edited by salondaome
Link to comment
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;
  }
}

image.thumb.png.7c15564c3483cd597bb6a8abc8d1cf38.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
  }
}

image.thumb.png.7c15564c3483cd597bb6a8abc8d1cf38.png

This works perfectly! Thank you so much!!

Link to comment

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.

Screen Shot 2020-12-04 at 2.24.42 PM.png

Link to comment

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

image.thumb.png.bf3f9a2a3e36d8b7314ff1aa24c09ecf.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.