S74 Posted March 25, 2022 Share Posted March 25, 2022 Site URL: https://bmsecurity.squarespace.com/test I'm having trouble finding the code to make these elements stack in mobile view. Is anyone able to help? Website: https://bmsecurity.squarespace.com/test Password: test <body> <div class="wrapper"> <!-- PRICING-TABLE CONTAINER --> <div class="pricing-table group"> <!-- PERSONAL --> <div class="block personal fl"> <h4 class="title">4G Monitoring</h4> <!-- CONTENT --> <div class="content"> <p class="price"> <sup>From</sup> <span>$37.50</span> <sub>+GST/mo.</sub> </p> <p class="hint">Installation from $250 + GST</p> </div> <!-- /CONTENT --> <!-- FEATURES --> <ul class="features"> <li><span class="fontawesome-cog"></span>Packaged for the smaller business environment.</li> <li><span class="fontawesome-star"></span>B&M Monitoring responds to alarm activations and follow an escalation list as per the client requirements.</li> <li><span class="fontawesome-dashboard"></span>All alarm events are logged including alarm activations and user detailed set/unset time.</li> <li><span class="fontawesome-cloud"></span>All events are viewable online via our web portal or mobile app available on iOS and Android.</li> </ul> <!-- /FEATURES --> <!-- PT-FOOTER --> <div class="pt-footer"> <a href="/contact"><p>Contact Us to Purchase</p></a> </div> <!-- /PT-FOOTER --> </div> <!-- /PERSONAL --> <!-- PROFESSIONAL --> <div class="block professional fl"> <h4 class="title">IP Monitoring</h4> <!-- CONTENT --> <div class="content"> <p class="price"> <sup>From</sup> <span>$27.50</span> <sub>+GST/mo.</sub> </p> <p class="hint">Installation from $350 + GST</p> </div> <!-- /CONTENT --> <!-- FEATURES --> <ul class="features"> <li><span class="fontawesome-cog"></span>Ideal for residential applications.</li> <li><span class="fontawesome-star"></span>Uses your existing Broadband connection.</li> <li><span class="fontawesome-dashboard"></span>B&M Monitoring responds to alarm activations and follow an escalation list as per the client requirements.</li> </ul> <!-- /FEATURES --> <!-- PT-FOOTER --> <div class="pt-footer"> <a href="/contact"><p>Contact Us to Purchase</p></a> </div> <!-- /PT-FOOTER --> </div> <!-- /PROFESSIONAL --> <!-- BUSINESS --> <div class="block business fl"> <h4 class="title">4G Commercial</h4> <!-- CONTENT --> <div class="content"> <p class="price"> <sup>From</sup> <span>$47.50</span> <sub>+GST/mo.</sub> </p> <p class="hint">Installation from $250 + GST</p> </div> <!-- /CONTENT --> <!-- FEATURES --> <ul class="features"> <li><span class="fontawesome-cog"></span>B&M Monitoring responds to alarm activation’s and follow an escalation list as per the client requirements.</li> <li><span class="fontawesome-star"></span>All alarm events are logged including alarm activation’s and user detailed set/unset time.</li> <li><span class="fontawesome-dashboard"></span>Set and unset times are logged and checked against a predefined schedule, if the system is access outside of operating hours monitoring follow your predefined response.</li> <li><span class="fontawesome-cloud"></span>All events are viewable online via our web portal or mobile app available on iOS an Android.</li> </ul> <!-- /FEATURES --> <!-- PT-FOOTER --> <div class="pt-footer"> <a href="/contact"><p>Contact Us to Purchase</p></a> </div> <!-- /PT-FOOTER --> </div> <!-- /BUSINESS --> </div> <!-- /PRICING-TABLE --> </div> </body> <style> /*--------- Font ------------*/ @import url(https://fonts.googleapis.com/css?family=Droid+Sans); @import url(http://weloveiconfonts.com/api/?family=fontawesome); /* fontawesome */ [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; } * { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*------ utiltity classes -----*/ .fl{ float:left; } .fr{ float: right; } /*its also known as clearfix*/ .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { zoom: 1; /*For IE 6/7 (trigger hasLayout) */ } body { background: #F2F2F2; font-family: 'Effra', sans-serif; line-height: 1.4em; font-size: 1.3rem; } .wrapper { } .pricing-table { width: 80%; margin: 50px auto; text-align: center; padding: 10px; padding-right: 0; } .block{ width: 30%; margin: 0 15px; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* border: 1px solid red;*/ } /*Shared properties*/ .title,.pt-footer{ color: #ffffff !important; text-transform: capitalize; line-height: 2.5; position: relative; } .content{ position: relative; color: #FEFEFE; padding: 20px 0 10px 0; } /*arrow creation*/ .content:after, .content:before,.pt-footer:before,.pt-footer:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .pt-footer:after,.pt-footer:before{ top:0; } .content:after,.pt-footer:after { border-color: rgba(136, 183, 213, 0); border-width: 5px; margin-left: -5px; } /*/arrow creation*/ .price{ position: relative; display: inline-block; margin-bottom: 0.625rem; } .price span{ font-size: 3.5rem; letter-spacing: 0.05em; font-weight: bold; } .price sup{ font-size: 1.1rem; position: absolute; top: 12px; left: -38px; } .hint{ font-style: normal; font-size: 1.1rem; } .features{ list-style-type: none; background: #FFFFFF; text-align: left; color: #414042; padding:20px 13%; font-size: 1.1rem; min-height: 420px; } .features li{ padding:10px 0; width: 100%; } .features li span{ padding-right: 0rem; } .pt-footer{ font-size: 1.1rem; text-transform: capitalize; } /*PERSONAL*/ .personal .title{ background: #ff6600; } .personal .content,.personal .pt-footer{ background: #ff6600; } .personal .content:after{ border-top-color: #ff6600; } .personal .pt-footer:after{ border-top-color: #FFFFFF; } /*PROFESSIONAL*/ .professional .title{ background: #ff6600; } .professional .content,.professional .pt-footer{ background: #ff6600; } .professional .content:after{ border-top-color: #ff6600; } .professional .pt-footer:after{ border-top-color: #FFFFFF; } /*BUSINESS*/ .business .title{ background: #ff6600; } .business .content,.business .pt-footer{ background: #ff6600; } .business .content:after{ border-top-color: #ff6600; } .business .pt-footer:after { border-top-color: #FFFFFF; } </style> Link to comment
tuanphan Posted March 26, 2022 Share Posted March 26, 2022 Add to Design > Custom CSS /* Mobile Stack Code Block */ @media screen and (max-width:767px) { .pricing-table.group>.block { width: 100% !important; margin: 10px !important; } .pricing-table.group { width: 90% !important; margin: 10px !important; padding: 0px !important; } } S74 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
S74 Posted March 27, 2022 Author Share Posted March 27, 2022 @tuanphan Thank you so much for your help! Your amazing as always ❤️ ❤️ ❤️ 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