Issue with Carousel Section Element Spacing!!

I'm having a hard time with this carousel section design on both desktop and mobile - what I want is to be able to reduce the space between the image elements and show adjacent slides (I want this effect both on desktop and mobile). (also, I have tried going into the design tab of the carousel menu and reduced the "space between elements" to 0 and still no effect)

Attached are some before pictures of what it currently looks like and some after photos of how I'd like it to look once the spacing issue is solved!

For mobile to show more than one item as well as the adjacent slide, I am currently using this code from will myers, but it's still not quite the sizing and space I want:

//HP CAROUSEL CUSTOM MOBILE

section[data-section-id="65aec611a9cae7745b64cf13"]{
//Mobile
  @media (max-width: 767px) {
    .user-items-list-carousel__slides {
      grid-template-columns: ~"repeat(2,1fr)" !important;
  margin-left:29% !important;
    }
  }

  .mobile-arrows{
    display:none
  }
}

I couldn't seem to find this answer anywhere else on the forum even though a few have asked similar questions in the past, so hopefully someone can help me find a solution!

Can you share link to page in screenshot? We can check easier

On 1/30/2024 at 4:10 AM, tuanphan said:

Can you share link to page in screenshot? We can check easier

Oh sorry! Here's the site:

https://www.jeannemarie.space/home-page

I was able to fix the desktop spacing issue between each image by adding a new section and building off of a "people" section template. But I am still having issues with how it appears on mobile. I want it to also be full width on mobile and show the adjacent slides.

Here's the code I'm currently using to try to show an adjacent slide on mobile, but it's still not full width and it cuts off my buttons:

//HP CAROUSEL CUSTOM MOBILE

section[data-section-id="65bd4ef80aa0e7737193f2e6"]{
//Mobile
  @media (max-width: 767px) {
    .user-items-list-carousel__slides
 { margin-left:-15% !important;
    }
  }
  .mobile-arrows{
    display:none
  }
  }

Also, here is a better photo representation of the final effect/look I'm trying to achieve on mobile!

In case that link doesn’t work here’s another!

jmstudiocreative.com/home-page

On 1/30/2024 at 4:10 AM, tuanphan said:

Can you share link to page in screenshot? We can check easier

Sorry for my late response, any ideas? @tuanphan

Try this CSS code

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="65bd4ef80aa0e7737193f2e6"] ul.user-items-list-carousel__slides.user-items-list-carousel__slides--initialized {
    min-height: unset !important;
    grid-template-columns: repeat(2,1fr) !important;
}
}

On 2/12/2024 at 8:10 AM, tuanphan said:

Try this CSS code

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="65bd4ef80aa0e7737193f2e6"] ul.user-items-list-carousel__slides.user-items-list-carousel__slides--initialized {
    min-height: unset !important;
    grid-template-columns: repeat(2,1fr) !important;
}
}

 

Thank you for the suggestion! Though it did not have any effect on the section 😞 Since I was having too many issues getting the look I wanted with that carousel section, I decided to use a gallery carousel block instead!

It works well except for the fact that on automatic scroll, it does not have an indefinite scroll function, so when the photo selection ends it's rounds it scrolls the bar all the way back to the beginning and has a very dizzying effect on the eye. Do you happen to know if there's any way I can code in an infinite scroll to this new section?

Thanks 🙂