Jump to content

Show adjacent items for Auto-layout carousel on mobile

Go to solution Solved by couldbegood,

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

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.