Looking for CSS help on universalstandard cards (Fixing CTAs to Bottom of Card)

Search Best Practices - Search Front-End
1

Hi there,

I’m using universalsectiontemplate to design the menu cards for a client. My goal is to have the “order now” button aligned across each card so that it looks very consistent. In order to achieve this, I’m trying to make the title fit onto 1 line, and the description truncated to a specific number of lines.

  1. I used the following code which uses an ellipsis to truncate the description. However, I’m hoping to offer the option “see more” so the user can read the rest of description. Any suggestions on how to do “see more” or something similar?

.HitchhikerProductProminentImage-detailsText {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;

  1. Is the best option to make sure title doesn’t fall onto 2 lines (see chicken and cheese quesadilla) to use “smaller” as the font size? All larger font sizes seemed to bring longer titles to second line. I wasn’t sure if there was anything else I could try besides font size.

For visual, this is how I want all the ‘order now’ buttons to appear (on same line)

image
image1192×665 342 KB

Thank you!

2

Hi Jessie,

An easier way to make sure the CTAs are fixed to the bottom of the card is to use FlexBox to our advantage.

Assuming you’re using the product-prominentImage card (or a forked version of it), add the following SCSS to your answers.scss file:

// fix CTAs to the bottom of the card
.HitchhikerProductProminentImage {
  &-body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  &-contentWrapper {
    height: 100%;
    justify-content: space-between;
  }
}

This accomplishes the following:

  • Specifies the .HitchhikerProductProminentImage-body class to use flex and take up the full height of the card available after the image
  • Allows the .HitchhikerProductProminentImage-contentWrapper class to take up the full height of the container, and specifies the spacing between the description & the CTAs to be space-between, forcing the CTAs to the end of the card.

Let me know if this helps!

1 Like
3

Thank you Amani! That’s exactly what I was trying to do.

4

Hi,

I am trying to do this for my subtitile and description fields on a productprominentimageclickable card and having a little issue.

I was able to get the description ( in this case the price) aligned for the most part but not sure how to get the subtitle field (ex: online exclusive) aligned when the Title is a single line.

Any help would be appreciated! Screenshot attached for reference:

Screen Shot 2021-06-07 at 1.25.36 PM