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

IMAGE BLOCK COLLAGE - CSS for Mobile


Recommended Posts

  • 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
  • 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. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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
  • 1 year later...

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!

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

Screen Shot 2022-07-23 at 11.43.17 AM.png

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

Screen Shot 2022-07-23 at 11.43.17 AM.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...