kristenblowfield Posted June 10, 2020 Share Posted June 10, 2020 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
tuanphan Posted June 10, 2020 Share Posted June 10, 2020 Q1. What is your problem? Q2. To center table, add this to Home > Design > Custom CSS .container { margin: 0 auto !important; width: 100%; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kristenblowfield Posted June 12, 2020 Author Share Posted June 12, 2020 @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! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.