joeblackham1 Posted June 22, 2020 Share Posted June 22, 2020 Site URL: https://www.joeblackham.com/new-page Hey all - sorry for another question but I've used the following in a code box and it is functioning - only problem is it is off-centre (this is a screenshot from my iMac and it a lot worse on laptop) and causing my Navigation pane to shrink! Images are attached - thanks for your help! <div id="generic_price_table"> <section> <div class="container"> <div class="row"> <div class="col-md-12"> <!--PRICE HEADING START--> <div class="price-heading clearfix"> </div> <!--//PRICE HEADING END--> </div> </div> </div> <div class="container"> <!--BLOCK ROW START--> <div class="row"> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>build</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">£</span> <span class="currency">69</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>1</span> social network</li> <li><span>1</span> post per week</li> <li><span>1</span> campaign per month</li> <li><span></span> Creation/Optimization</li> <li><span></span> Social Analytics</li> <li><span></span>Build Strategy</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content active clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>growth</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">£</span> <span class="currency">99</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>Up to 2</span> social networks</li> <li><span>2</span> posts per week</li> <li><span>2</span> campaigns per month</li> <li><span></span> Creation/Optimization</li> <li><span></span> Social Analytics</li> <li><span></span>Growth Strategy</li> <li><span></span> Account Monitoring</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">Buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>Acceleration</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">£</span> <span class="currency">149</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>Up to 3</span> social networks</li> <li><span>4</span> posts per week</li> <li><span>3</span> campaigns per month</li> <li><span></span> Creation/Optimization</li> <li><span></span> Social Analytics</li> <li><span></span>Acceleration Strategy</li> <li><span></span> Account Monitoring</li> <li><span></span>Customer Relation Strategy</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> </div> <!--//BLOCK ROW END--> </div> <style> @import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); body{background-color:#eee;} #generic_price_table{ background-color: #fff; } /*PRICE COLOR CODE START*/ #generic_price_table .generic_content{ background-color: #f0f0f0; } #generic_price_table .generic_content .generic_head_price{ background-color: #f6f6f6; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ color: #525252; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li span{ color: #4aa771; font-weight: bold; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ background-color: #E4E4E4; border-left: 5px solid #2ECC71; } #generic_price_table .generic_content .generic_price_btn a{ border: 1px solid #2ECC71; color: #2ECC71; } #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{ border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71; color: #fff; } #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span, #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{ color: #fff; } #generic_price_table .generic_content:hover .generic_price_btn a, #generic_price_table .generic_content.active .generic_price_btn a{ background-color: #2ECC71; color: #fff; } #generic_price_table{ margin: 50px 0 50px 0; font-family: 'Raleway', sans-serif; } .row .table{ padding: 28px 0; } /*PRICE BODY CODE START*/ #generic_price_table .generic_content{ overflow: hidden; position: relative; text-align: center; } #generic_price_table .generic_content .generic_head_price { margin: 0 0 20px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content{ margin: 0 0 50px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-style: solid; border-width: 90px 1411px 23px 399px; position: absolute; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head{ padding-top: 40px; position: relative; z-index: 1; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ font-family: "Raleway",sans-serif; font-size: 28px; font-weight: 400; letter-spacing: 2px; margin: 0; padding: 0; text-transform: uppercase; } #generic_price_table .generic_content .generic_head_price .generic_price_tag{ padding: 0 0 20px; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price{ display: block; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ display: inline-block; font-family: "Lato",sans-serif; font-size: 28px; font-weight: 400; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ font-family: "Lato",sans-serif; font-size: 60px; font-weight: 300; letter-spacing: -2px; line-height: 60px; padding: 0; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ display: inline-block; font-family: "Lato",sans-serif; font-size: 24px; font-weight: 400; vertical-align: bottom; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ font-family: "Lato",sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 3px; vertical-align: bottom; } #generic_price_table .generic_content .generic_feature_list ul{ list-style: none; padding: 0; margin: 0; } #generic_price_table .generic_content .generic_feature_list ul li{ font-family: "Lato",sans-serif; font-size: 18px; padding: 15px 0; transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li .fa{ padding: 0 10px; } #generic_price_table .generic_content .generic_price_btn{ margin: 20px 0 32px; } #generic_price_table .generic_content .generic_price_btn a{ border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; -webkit-border-radius: 50px; display: inline-block; font-family: "Lato",sans-serif; font-size: 18px; outline: medium none; padding: 12px 30px; text-decoration: none; text-transform: uppercase; } #generic_price_table .generic_content, #generic_price_table .generic_content:hover, #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content .price, #generic_price_table .generic_content:hover .price, #generic_price_table .generic_content .generic_price_btn a, #generic_price_table .generic_content:hover .generic_price_btn a{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } @media (max-width: 320px) { } @media (max-width: 767px) { #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 768px) and (max-width: 991px) { #generic_price_table .col-md-3{ float:left; width:50%; } #generic_price_table .col-md-4{ float:left; width:50%; } #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px) { } #generic_price_table_home{ font-family: 'Raleway', sans-serif; } .text-center h1, .text-center h1 a{ color: #7885CB; font-size: 30px; font-weight: 300; text-decoration: none; } .demo-pic{ margin: 0 auto; } .demo-pic:hover{ opacity: 0.7; } #generic_price_table_home ul{ margin: 0 auto; padding: 0; list-style: none; display: table; } #generic_price_table_home li{ float: left; } #generic_price_table_home li + li{ margin-left: 10px; padding-bottom: 10px; } #generic_price_table_home li a{ display: block; width: 50px; height: 50px; font-size: 0px; } #generic_price_table_home .blue{ background: #3498DB; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .emerald{ background: #2ECC71; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .grey{ background: #7F8C8D; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .midnight{ background: #34495E; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .orange{ background: #E67E22; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .purple{ background: #9B59B6; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .red{ background: #E74C3C; transition:all 0.3s ease-in-out 0s; } #generic_price_table_home .turquoise{ background: #1ABC9C; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .blue:hover, #generic_price_table_home .emerald:hover, #generic_price_table_home .grey:hover, #generic_price_table_home .midnight:hover, #generic_price_table_home .orange:hover, #generic_price_table_home .purple:hover, #generic_price_table_home .red:hover, #generic_price_table_home .turquoise:hover{ border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .divider{ border-bottom: 1px solid #ddd; margin-bottom: 20px; padding: 20px; } #generic_price_table_home .divider span{ width: 100%; display: table; height: 2px; background: #ddd; margin: 50px auto; line-height: 2px; } #generic_price_table_home .itemname{ text-align: center; font-size: 50px ; padding: 50px 0 20px ; border-bottom: 1px solid #ddd; margin-bottom: 40px; text-decoration: none; font-weight: 300; } #generic_price_table_home .itemnametext{ text-align: center; font-size: 20px; padding-top: 5px; text-transform: uppercase; display: inline-block; } #generic_price_table_home .footer{ padding:00px 0; } .price-heading{ text-align: center; } .price-heading h1{ color: #666; margin: 0; padding: 0 0 50px 0; } .demo-button { background-color: #333333; color: #ffffff; display: table; font-size: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 50px; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium ; padding: 10px; text-align: center; text-transform: uppercase; } .bottom_btn{ background-color: #333333; color: #ffffff; display: table; font-size: 28px; margin: 60px auto 20px; padding: 10px 25px; text-align: center; text-transform: uppercase; } .demo-button:hover{ background-color: #666; color: #FFF; text-decoration:none; } .bottom_btn:hover{ background-color: #666; color: #FFF; text-decoration:none; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> Link to comment
Guest Posted June 22, 2020 Share Posted June 22, 2020 You have to do the following changes .content-wrapper{ width: 60vw; } .content{ width: 100vw !important; } @media only screen and (max-width: 600px) .col-md-4{ width: 90vw; } Make sure to give only to that price table container div's Laptop View & Mobile view is attached Thanks , if any help needed https://www.upwork.com/fl/karangoyal13 my upwork account (I found this post there) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.