Help please! Move collage card under image on mobile? Is it possible!?

Site URL: https://www.planit-live.com/our-work

Hi there!

Would anyone be able to help me!? On mobile, I would like to move the collage block that currently overlays the images, to underneath or just a bit further down, rather than in obscuring the image. But we are happy with it on desktop, but the mobile version looks a bit messy?

2 hours ago, amiem said:

Site URL: https://www.planit-live.com/our-work

Hi there!

Would anyone be able to help me!? On mobile, I would like to move the collage block that currently overlays the images, to underneath or just a bit further down, rather than in obscuring the image. But we are happy with it on desktop, but the mobile version looks a bit messy?

 

 

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1647272598809_8352  .intrinsic {
    z-index: 4;
  }
  #block-yui_3_17_2_1_1647272598809_8352  .image-card-wrapper {
    margin-top: -4% !important;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

On 3/17/2022 at 1:55 PM, bangank36 said:

My testing

Hey, thats great, thanks so much for helping, this is working now for the the first image/card but the 2 underneath are still showing as before, is there a way for all of them to be styled like this? Thanks again, really apprieciated!

On 3/27/2022 at 12:47 AM, amiem said:

Hey, thats great, thanks so much for helping, this is working now for the the first image/card but the 2 underneath are still showing as before, is there a way for all of them to be styled like this? Thanks again, really apprieciated!

Try this new code

@media only screen and (max-width: 640px) {
  body#collection-6228811a62ab7c41aabf716b  .intrinsic {
    z-index: 4;
  }
  body#collection-6228811a62ab7c41aabf716b  .image-card-wrapper {
    margin-top: -4% !important;
  }
}