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

IMAGE BLOCK COLLAGE - CSS for Mobile


Recommended Posts

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!

Link to post
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

Posted Images

  • 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 post
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 post
  • 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 post

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 post

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 post
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

Create an account or sign in to comment

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


×
×
  • Create New...