How to make my HTML suitable for Mobile View (responsive UI)
I've coppied 3 packages ( Price labels ) source code from http://cssdeck.com/labs/pricingtables, and when I embed CSS and HTML code to my website the page view works fine using my PC (Desktop) but when I use my Phone(Android) not all of packages appear, Can you please help?
Try out the following code snippet. Since it makes use of basic elements of bootstrap functionality.You can check the UI responsiveness on across different mobile devices.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<!--Added class row -->
<div class="page-container row">
<!---Added col-lg-4 class -->
<!-- Total 12 columns are divided into 3 parts as col-lg-4 -->
<div class="pricing-table col-lg-4">
<div class="pricing-table-header">
<h2>Personal Site</h2>
<h3>$15/month</h3>
</div>
<div class="pricing-table-space"></div>
<div class="pricing-table-features">
<p><strong>50</strong> Email Addresses</p>
<p><strong>35GB</strong> of Storage</p>
<p><strong>40</strong> Databases</p>
<p><strong>10</strong> Domains</p>
<p><strong>24/7 Unlimited</strong> Support</p>
</div>
<div class="pricing-table-sign-up">
<p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
</div>
</div>
<div class="pricing-table pricing-table-highlighted col-lg-4">
<div class="pricing-table-header">
<h2>Small Business</h2>
<h3>$59/month</h3>
</div>
<div class="pricing-table-space"></div>
<div class="pricing-table-text">
<p><strong>This is a perfect choice for small businesses and startups.</strong></p>
</div>
<div class="pricing-table-features">
<p><strong>Unlimited</strong> Email Addresses</p>
<p><strong>65GB</strong> of Storage</p>
<p><strong>75</strong> Databases</p>
<p><strong>25</strong> Domains</p>
<p><strong>24/7 Unlimited</strong> Support</p>
</div>
<div class="pricing-table-sign-up">
<p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
</div>
</div>
<div class="pricing-table col-lg-4">
<div class="pricing-table-header">
<h2>Corporate Site</h2>
<h3>$85/month</h3>
</div>
<div class="pricing-table-space"></div>
<div class="pricing-table-features">
<p><strong>Unlimited</strong> Email Addresses</p>
<p><strong>85GB</strong> of Storage</p>
<p><strong>Unlimited</strong> Databases</p>
<p><strong>50</strong> Domains</p>
<p><strong>24/7 Unlimited</strong> Support</p>
</div>
<div class="pricing-table-sign-up">
<p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
</div>
</div>
</div>
</body>
</html>
Refer the use of different components of bootstrap as http://getbootstrap.com/components/