Pricing Table Ribbon Overflow Issue

Turnkey Webmaster

• May 30, 2023 03:54
• Edited

I can't seem to hide the overflow of these ribbons on my pricing table (via Switch element). 

Is there specific CSS I need to add to the row, alongside my existing CSS for the columns? 

Here is a picture showing the problem:

Let me add the CSS I'm using for the ribbons. This CSS lives in Project Settings, and CSS Class added to specific columns:

/* ribbon banner with best deal title */
.price-banner-1:after {
    content: 'Best Deal';
    position: absolute;
    display: block;
    right: -60px;
    top: 30px;
    width: 225px;
    padding: 2px 10px;
    background-color: #2cba6c;
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    overflow: hidden;
}

0

• 

  Turnkey Webmaster

  • May 31, 2023 00:02

  I'd love feedback whether there's another (arguably better) way to solve this issue, but I did find a solution that I'll share below.

  Here's the result:

  

  I accomplished this by doing the following:

  1. In the specific columns where the ribbons are (and where the custom CSS Class goes), I added the following in the Custom CSS box:

  element {overflow: hidden;}

  2. I removed the right margin (0px) for every column in the pricing table.

  3. I removed the shadow (none) for every column in the pricing table.

  4. I updated the CSS in Project Settings to the following:

  /* ribbon banner with best value title */
  .price-banner-1:after {
      content: 'Best Value';
      position: absolute;
      display: block;
      right: -60px;
      top: 30px;
      width: 200px;
      padding: 2px 10px;
      background-color: #2cba6c;
      color: #fff;
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-align: center;
      box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
  }

  0
• 

  Ariel H.

  • May 31, 2023 08:48

  Hi,

  Thank you for contacting us.

  We normally do not provide support for custom code, but I am glad that you were able to resolve this on your own.

  In your CSS, you may want to combine the "font-family", "font-size", and "font-weight" properties into a single "font" shorthand property like this.

  font: bold 14px 'Source Sans Pro', sans-serif;

  Thank you for sharing your solution.

  Best regards,
  Ariel H.

   

  0
• 

  Turnkey Webmaster

  • May 31, 2023 21:24

  Interesting idea, thanks Ariel!

  0

Please sign in to leave a comment.