Jump to content

Image Card (auto Layout Gallery) rounded corners with full width image.

Go to solution Solved by dsunnock,

Recommended Posts

I'm trying to make the image cards on my website look like the image cards on my figma file.

PW: victory

 

 

Current CSS code

// Auto Carousel List - Card Border Radius //
.user-items-list-carousel .list-item { 
  border: 2px solid #eee;
  border-radius: 20px !important;
}


/* Hide controls on native video player */
.video-player .plyr .plyr__controls {
  display: none;
}

// Rounded corner on Video Player  //
.video-player .plyr video {
    object-fit: cover !important;
    border-radius: 20px !important;
}

// Rounded corner on image blocks  //
.user-items-list-carousel .list-item img {
  border-radius: 20px !important;
}


// Vertical Video Player  //
.sqs-native-video .native-video-player {
    padding-bottom: 80% !important;
}

#block-yui_3_17_2_1_1716925040398_5141.video-block .video-player{
  padding-bottom: 120%;
  border-radius: 20px !important;
}

// Scroller Cards  //
section[data-section-id="665720dceda419650c4267d7"] {
  --item-width: 270px;
  --additional-offset: 0px;

  .user-items-list-carousel__gutter {
    padding-left:0px !important;
    padding-right:0px !important;
  }
  .user-items-list-carousel__slides {
    overflow-x:scroll;
    grid-template-columns:unset !important;
    grid-auto-columns:var(--item-width);
    cursor: auto;
    padding-left:~'calc(var(--offset-left) + var(--additional-offset))';
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .user-items-list-carousel__slides::-webkit-scrollbar {
    display: none;
  }

  .list-item {
    transform: unset !important;
    grid-row: 1;
    grid-column: unset;
    pointer-events:unset;
    user-select: unset;
    cursor: auto;
  }
  .desktop-arrows, .desktop-arrows{
    display: none !important;
  }
}

[class*="mobile-arrow"] {
	display: none !important;
}

 

IMG_4169.PNG

Screenshot 2024-05-30 at 3.27.05 PM.png

Link to comment

@dsunnock You can try adding this code snippet under Utilities > Website Tools > Custom CSS. Make sure you add this code after your existing code. 

.user-items-list-carousel .list-item img {
	border-radius: 20px 20px 0 0 !important;
}
.user-items-list-carousel[data-alignment-vertical="middle"] .user-items-list-carousel__slide {
	padding: 0 !important;
}
.user-items-list-carousel .list-item {
	border: 0px solid #eee !important;
}
.list-item-content {
	padding: 20px;
}
.user-items-list-carousel[data-button-placement="center"] .list-item-content__button-container {
	display: flex !important;
	justify-content: center !important;
	margin-top: 14% !important;
}

Let me know how it goes. Thanks! 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.