marketingrisingdigital Posted October 10 Share Posted October 10 (edited) Hello, helpful SS community! I am trying to create a price card, but when I apply the code to my website it wont display properly. I have ran the code in w3school as well as onecompiler.com (to test) and it does display properly in both places, however, it's broken on my site. I've included some photos : The first photo is what it looks like on onecompiler.com (look correct) Second photo is the code on W3school (also correct) Third image is what it looks like under the "home" section of the website. </broken> It appears the headers: "Optimize", "Amplify" and "Rise Above" are stacked on one another. I just don't understand why it's displaying correctly when I test it, just not on the actual SS site. Thank you for your help, Tempy Keller ps.. site password is Risingup23 www.risingdigitalmarketing.com Edited October 10 by marketingrisingdigital updated image Link to comment
Ziggy Posted October 10 Share Posted October 10 7 hours ago, marketingrisingdigital said: It appears the headers: "Optimize", "Amplify" and "Rise Above" are stacked on one another. I just don't understand why it's displaying correctly when I test it, just not on the actual SS site. One potential problem is that you are using a class that is already defined in Squarespace, this is commonly a problem when moving something designed on it's own being dropped into an existing website. .columns and .header should probably be unique as a start. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
marketingrisingdigital Posted October 10 Author Share Posted October 10 @Ziggy your suggestion worked in correcting the header issue, thank you, but now the columns are messed up. I would like them side by side, all three. Link to comment
Ziggy Posted October 10 Share Posted October 10 When you changed the classes to something unique did you do it on the CSS and HTML? TBH it's pretty difficult to help you debug your code without you sharing the code. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
marketingrisingdigital Posted October 10 Author Share Posted October 10 @Ziggy I meant to include that info. I changed the "header" name only to ".seo-header" which fixed the crowding issues. Please see below: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(13,7,84) } .price .seo-header { background-color: 111; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #eee; font-size: 20px; } .button { background-color: #0d0754; border: none; border-radius: 17px; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 600px) { .columns { width: 100%; }} </style> </head> <body> <div class="columns"> <ul class="price"> <li class="seo-header" style="background-color:#565187">Optimize</li> <li class="grey">$ 599</li> <li>Title Tags (up to 6 pages)</li> <li>Meta descriptions (up to 6 pages)</li> <li>Keywords for all Pages</li> <li>Keyword map</li> <li>Ongoing support and bimonthly check ins for 6 months</li> <li>+ 8 MORE items</li> <li class="grey"><a href="https://risingdigitalmarketing.com/seo-service-packages-for-small-business/p/optimize-my-content" class="button">Select Plan</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="seo-header" style="background-color:#3d3976">Amplify</li> <li class="grey">$ 430 / month</li> <li>Everything in the Optimize plan +</li> <li>Broken links + advanced internal linking</li> <li>Business citations</li> <li>Client Favorite: Research what your customers want to know and adjust content to satisfy those queries</li> <li>+ 18 MORE items</li> <li class="grey"><a href="#" class="button">Select Plan</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="seo-header" style="background-color:#0D0754">Rise Above</li> <li class="grey">$ 1450 / month</li> <li>Everything in the Amplify plan +</li> <li>75+ blog topic ideas</li> <li>Content Creation</li> <li>Up to 70 relevant, high-quality backlinks per year</li> <li>Implement Schema Markup</li> <li>+ 32 MORE items</li> <li class="grey"><a href="#" class="button">Select Plan</a></li> </ul> </div> </body> </html> Link to comment
Ziggy Posted October 10 Share Posted October 10 You are missing the dot front in front of columns: Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment