Jump to content

Pricing Table with custom HTML adjusting page padding

Recommended Posts

Site URL: https://www.core4.com.au/classes

Hi there,

I have custom CSS and HTML for a pricing table on my site and my site padding and text has been reduced. Can i please get assistance with the HTML as i can't seem to fix this issue. 

Using Squarespace 7.1

 

HTML:

 

<html>
<head>
  <meta charset="UTF-8">
  <title>Pricing Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
  <div class="container-fluid">
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <div class="card text-center">
            <div class="title">
              <i class="fa fa-paper-plane" aria-hidden="true"></i>
              <h2>Basic</h2>
            </div>
            <div class="price">
              <h4>$25</h4>
            </div>
            <div class="option">
              <ul>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 10 GB Space </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 3 Domain Names </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 20 Email Address </li>
              <li> <i class="fa fa-times" aria-hidden="true"></i> Live Support </li>
              </ul>
            </div>
            <a href="#">Order Now </a>
          </div>
        </div>
        <!-- END Col one -->
        <div class="col-sm-4">
          <div class="card text-center">
            <div class="title">
              <i class="fa fa-plane" aria-hidden="true"></i>
              <h2>Standard</h2>
            </div>
            <div class="price">
              <h4>$50</h4>
            </div>
            <div class="option">
              <ul>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 50 GB Space </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 5 Domain Names </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited Email Address </li>
              <li> <i class="fa fa-times" aria-hidden="true"></i> Live Support </li>
              </ul>
            </div>
            <a href="#">Order Now </a>
          </div>
        </div>
        <!-- END Col two -->
        <div class="col-sm-4">
          <div class="card text-center">
            <div class="title">
              <i class="fa fa-rocket" aria-hidden="true"></i>
              <h2>Premium</h2>
            </div>
            <div class="price">
              <h4>$100</h4>
            </div>
            <div class="option">
              <ul>
              <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited GB Space </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 30 Domain Names </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited Email Address </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> Live Support </li>
              </ul>
            </div>
            <a href="#">Order Now </a>
          </div>
        </div>
        <!-- END Col three -->
      </div>
    </div>
  </div>
</section>
</body>
</html>

 

 

I am also having trouble centering the pricing table, can i please get assistance with the CSS to do this?

Thanks

Kristen

 

Link to comment
  • Replies 2
  • Views 824
  • Created
  • Last Reply

@tuanphan

Thanks so much for centering the table!!

My other issue is my page margin (apologies i said padding in my last post but i meant margin), and also my font throughout this particular page is reducing. I believe it might be scaling due to my HTML.

Please see screenshots that show the difference between my home page and membership page. I am a bit unsure if it is to do with the HTML viewport or if i need to apply CSS to fix the pages dimensions and scaling?

Appreciate your help!

core4 capture2.PNG

core4 capture.PNG

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.