Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

IMAGE BLOCK COLLAGE - CSS for Mobile


Recommended Posts

can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 months later...

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!

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

Link to comment
  • 4 months later...

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

 

Edited by marshallkylex
Link to comment

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

Link to comment

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!! :)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
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!

Screen Shot 2020-07-02 at 4.34.43 PM.png

Link to comment
  • 11 months later...
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:

 

 

 

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