IMAGE BLOCK COLLAGE - CSS for Mobile

I have several Image Blocks with Collage Design throughout my website and the text portion is overlapping and cutting off the image in mobile view. I'm looking for CCS to edit this so they stack since this is not an edit option in Site Styles 

Thank you!

can you share link to your site?

I was having a very similar problem, but was able to adjust the wrapper for the text using this group of code:

@media only screen and (max-width: 480px) {  
#block-ID // You'll need to find this...
.image-block-outer-wrapper.combination-animation-slide-up.animation-loaded.sqs-text-ready .sqs-dynamic-text-container {
  opacity: 1;
  transform: matrix(1,0,0,1,0,0);
  }

An easy way to find the #block-ID is using the tool "Squarespace Collection/Block Identifier" (a Google Chrome Extension). This will then only target that image collage block. Then to adjust the position, change the matrix values to your desired result!

Hope that helps!

19 minutes ago, JTyAutry said:

transform: matrix(1,0,0,1,0,0);
  }

Actually, use this bit instead to adjust it:

.image-block-outer-wrapper.combination-animation-slide-up.animation-loaded.sqs-text-ready .sqs-dynamic-text-container {
  opacity: 1;
  position: relative;
  left: 10px;
  top: 40px;
  }

I tried following the instructions but it doesn't seem to change anything. I used the google chrome extension to identify the block and changed the top to 400 to make sure I was seeing a difference. This is the code I'm using below, am I missing something? I am new to custom code on squarespace so I'm not surprised if I missed something obvious. My website is shine-inside.com and I'm trying to fix the mobile collage image block overlap to keep it from covering up so much of the images.

Quote

@media only screen and (max-width: 480px) {  
#block-11994ea0a6f14029bee5
.image-block-outer-wrapper.combination-animation-slide-up.animation-loaded.sqs-text-ready .sqs-dynamic-text-container {
  opacity: 1;
  position: relative;
  left: 10px;
  top: 400px;
  }}

I found another code that I was able to adjust and get to work:

//Collage Blocks Mobile
@media (max-width:480px){
  .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper{
    width:90%;
    margin-top:calc(-10%)!important;
    position:relative}
  .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic,.sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-left .intrinsic{
    left:5%
  }
}

Hi marshallkylex,

I am so happy I found this conversation, I am updating my website www.mojocampers.co.nz and was looking for exactly that solution!! :)

I would like to have the text a little bit less overlapping than in your code, so it moves even a bit more below the picture on the mobile version. Could you please let me know which values in the code I have to adjust to achieve this?

Thanks a lot!! :)

1 hour ago, Ina_Mojo said:

Hi marshallkylex,

I am so happy I found this conversation, I am updating my website www.mojocampers.co.nz and was looking for exactly that solution!! :)

I would like to have the text a little bit less overlapping than in your code, so it moves even a bit more below the picture on the mobile version. Could you please let me know which values in the code I have to adjust to achieve this?

Thanks a lot!! :)

Can you share link to page where you use image block collage?

2 hours ago, tuanphan said:

Can you share link to page where you use image block collage?

Hi, thanks for the reply:

https://www.mojocampers.co.nz/sleepervan-generation-2


I am talking about the collage with the white text block next to it ("Features - Generation 2")

It already helped for the mobile version but would like to give it a try if the text is placed even lower for mobile.

Also having troubles with the very last collage block on this site for mobile:
https://www.mojocampers.co.nz/generation-1
(Please see screenshot attached)

Same problem here, the pink text overlaps the picture on the mobile version.

Thank you!

On 6/25/2020 at 12:49 PM, marshallkylex said:

This is so great Marshall, just what i has been looking for Thanks!

I just tweaked the code a bit so both image and text block go Full Width

//Collage Blocks Mobile - FULL WIDTH//
@media (max-width:768px){
  .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper{
    width:100%;
    margin-top:calc(-1%)!important;
    position:relative}
  .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic,.sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-left .intrinsic{
   width:100%;
  }
}

On 6/25/2020 at 12:49 PM, marshallkylex said:

 

 

Is there a way to change which image is on top of the collage for mobile view? The text block covers too much of the image block. I would like to have the image block on top instead of the text block. Thank you!

9 hours ago, SandraC said:

Is there a way to change which image is on top of the collage for mobile view? The text block covers too much of the image block. I would like to have the image block on top instead of the text block. Thank you!

If you share link to page where you use collage, we can help easier

Thank you for replying. The page is sandracurry.com/home. Here is a screenshot of the area I am talking about. I would like to bring the photograph in front of the text box, but only for mobile view. Also, I noticed that the first letter of "Hello" is now being cut off. Any tips for that too?

On 7/24/2022 at 1:45 AM, SandraC said:

Thank you for replying. The page is sandracurry.com/home. Here is a screenshot of the area I am talking about. I would like to bring the photograph in front of the text box, but only for mobile view. Also, I noticed that the first letter of "Hello" is now being cut off. Any tips for that too?

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1649814573421_1225328 .image-inset {
    position: relative;
    z-index: 9999;
}
}

On 7/25/2022 at 8:05 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1649814573421_1225328 .image-inset {
    position: relative;
    z-index: 9999;
}
}

 

That worked great to bring the picture to the front. Thank you, thank you! Do you know how to get the "H" for hello to show up? It's being cut off in the mobile view, but shows up for tablet and desktop.

On 7/28/2022 at 9:35 AM, SandraC said:

That worked great to bring the picture to the front. Thank you, thank you! Do you know how to get the "H" for hello to show up? It's being cut off in the mobile view, but shows up for tablet and desktop.

Use this new code

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1649814573421_1225328 .image-inset {
    position: relative;
    z-index: 9999;
}
div#block-yui_3_17_2_1_1649814573421_1225328 .image-title p {
    display: inline-block !important;
    white-space: nowrap !important;
}
}

thank you! it worked! 🙂