Jump to content

Auto-centering text on flip card with scroll function

Recommended Posts


I have a section with flipping poster cards containing scroll functionality. Everything works fine but I have an aesthetic issue I can't seem to solve. I would like for text to be centered but, when that alignment is set, it centers all text without regard to the beginning of the text. That means any text that overflows the card field gets cut off at top and bottom. So "flex-start" alignment works great for overflow text but doesn't give me the desired centering aesthetic on short text.

See attached image. Below is the code for this section:


// Begin Poster Card Flip
.design-layout-poster img{ transition: 1s}
.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1s} 
.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s;}
//End Poster Card Flip

// Begin Card Scroll
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
  overflow-y: auto !important;
.sqs-block-image .design-layout-poster .image-card-wrapper {
  align-items: flex-start !important;
  pointer-events: auto !important;
  padding-top: 1em;
  padding-bottom: 1em;
//End Card Scroll


Edited by RoniaMH
Site URL in body
Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @tuanphan,

Overflow text appearing as it does in the flex-start example in the top row is perfect. However, I want text that doesn't overflow to conform to the command to center on the card, as it does in the February 2023 card in the center example on the bottom row.

The issue I'm having is the code is allowing one or the other. The text can either be centered, which works great for non-overflow text but cuts off overflow text at top & bottom, or I can have overflow text start at the first line of text but it won't center non-overflow text.

Does that make sense?

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.