How do I make this stack in mobile view?

S74 · 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>

tuanphan · 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 · March 27, 2022

@tuanphan

Thank you so much for your help! Your amazing as always ❤️ ❤️ ❤️

How do I make this stack in mobile view?

Recommended Posts

S74

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

Link to comment

S74

Link to comment

Create an account or sign in to comment

News

tuanphan

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources