Jump to content

Show adjacent items for Auto-layout carousel on mobile

Go to solution Solved by Goood_Studio,

Recommended Posts

  • 2 weeks later...

Stumbled on the same issue. I'm useless at Flex, the Will Meyers code helped me out with the first part. 

I know this can't be the right way to approach it but before I gave up I tried tweaking the margin on the targeted class.

Quote

   .user-items-list-carousel__slides {
      grid-template-columns: ~"repeat(2,1fr)" !important;
      margin-left:29% !important;
    }

That seems a place to start, I've then just stumbled around with padding and grid-space until it looks passable. I think I'm going to code jail but it's a client request and something that should be implemented in the autolayout block anyway

Link to comment
  • 3 weeks later...
  • Solution

For anyone that is interested.. 

Here's what worked for me. Code was pasted in the  site Header:

 

<style>
  @media screen and (max-width:767px) {
  .user-items-list-item-container[data-section-id="639c679e8b229b37d4607eed"] ul {
    grid-template-columns: repeat(2,1fr) !Important; margin-left:29% !important;
}
  }
</style>

 

Thanks @nickehsmith for the missing bit

Edited by couldbegood
Link to comment
  • 8 months later...
On 1/19/2023 at 9:22 AM, Goood_Studio said:

For anyone that is interested.. 

Here's what worked for me. Code was pasted in the  site Header:

 

<style>
  @media screen and (max-width:767px) {
  .user-items-list-item-container[data-section-id="639c679e8b229b37d4607eed"] ul {
    grid-template-columns: repeat(2,1fr) !Important; margin-left:29% !important;
}
  }
</style>

 

Thanks @nickehsmith for the missing bit

How did you make the carousel clickable and swipeable with out buttons? I'm trying to achieve the same effect.

Link to comment
On 10/11/2023 at 8:02 PM, JasonArend said:

How did you make the carousel clickable and swipeable with out buttons? I'm trying to achieve the same effect.

Hi. Sorry if it's too late but I use a code someone else wrote to move the button over the image and hide it:

 

/* Make list images on people clickable */
section[data-section-id="ADD YOUR OWN"] li.list-item {
    position: relative !important;
}
section[data-section-id="ADD YOUR OWN"] .list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
section[data-section-id="ADD YOUR OWN"] a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

 

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.