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

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!

Share this post


Link to post

can you share link to your site?


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post

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!

Share this post


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

Share this post


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