Jump to content

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

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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?

 

 

Screenshot 2022-03-16 at 16.57.52.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.1da7595a9e8180c6509715e5427bde09.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
On 3/17/2022 at 1:55 PM, bangank36 said:

My testing

image.png.1da7595a9e8180c6509715e5427bde09.png

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!

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

 

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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.