Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
HelenScott

coding help for pricing table

Question

I need help designing the pricing table attached.

I have got the following code but would like the grey box on the left to be the same height as the box on the right.

It works for mobile but on tablet and above it looks uneven. Is this possible in CSS. 

code:

<div class="st-price-section">
<div class="st-price-columns">
  <ul class="st-price-price">
    <li class="st-price-header">heading one</li>
        <li class="grey"><a class="st-button">$</a></li>

    <li>line 1</li>

    <li>line 2 </li>
    <li>line 2 </li>

    

  </ul>
</div>

<div class="st-price-columns">
  <ul class="st-price-price">
    <li class="st-price-header">heading 2</li>
          <li class="grey"><a class="st-button">$</a></li>
   <li>line 1</li>

    <li>line 2 </li>
    <li>line 3 </li>
    <li>line 4 </li>
    <li>line 5 </li>
    
</ul>
</div>


</div>

<style>
.st-price-section * {box-sizing: border-box;  }
.st-price-columns {width: 50%;padding: 8px; float: left; grid-auto-rows: 2fr;  }
.st-price-price {list-style-type: none; margin: 0;padding: 0;text-align: center;-webkit-transition: 0.3s; transition: 0.3s;}
.st-price-price:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}
.st-price-price .st-price-header {background-color: #e0474c;color: white;font-size: 26px; font-weight: 700; text-align: center; text-transform: uppercase}
.st-price-price li {padding: 5px;background-color: #F1EFED; color: #444040; }
.st-price-price .grey {background-color: #444040;font-size: 22px;font-weight: 700;}
.st-button {border: none;color: white;padding: 10px 25px;text-align: center;text-decoration: none;font-size: 26px;}

@media only screen and (max-width: 925px) {.st-price-columns {width: 50%;}
}
@media only screen and (max-width: 600px) {.st-price-columns {width: 100%;}
}

</style>

Screen Shot 2019-12-10 at 8.16.16 PM.png

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

You should share link to your site.

Just looking at the code, very time-consuming, will limit other from answering.

Not related, you can use Text Block + CSS to create Pricing Tablet. You can easily edit everything. I did for a client a month ago.


COVID-19: Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0

The code from this article: https://www.spacetutorials.com/pricing-table which is adapted from this W3Schools article: https://www.w3schools.com/howto/howto_css_pricing_table.asp 

Neither has been built to take advantage of the built-in responsive features of Squarespace.


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...