"New About Test"
Bootstrap 3.3.0 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <hr class="hr"> <section class="padded-container about"> <div class="about__grid" aa-region="about"> <div class="about__header"> <div class="about__header-about">About</div> <div class="about__header-showTitle">About Abby</div> <div class="about__header-tuneInTime">Created By: Sassy Mohen</div></div> <div> </div> <div><div class="about__description with-text-clamp" id="js-about-description" style="overflow: hidden;"> <div class="about__copy" id="js-about-copy" style="display: inline;">Still believing in fairy-tale romance and love, Abby Freeman has a lot to learn. Newly single after breaking up with her high-school sweetheart, Abby finds herself in a dating market much changed since she last entered. Supported by her two more practical best friends Micah & Caroline, Abby begins her undying quest to find true love in LA...and maybe a little fun too.</div></div> <div class="social"> <h2 class="social-heading">Follow Us:</h2> <div class="social-icons"> <a class="facebook" href="http://facebook.com/aboutabby"><i class="fa fa-facebook-square fa-2x"></i></a> <a class="twitter" href="http://twitter.com/aboutabbyshow"><i class="fa fa-twitter-square fa-2x"></i></a> </div></div></div></div></section> <hr class="hr">
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); body{background:#2d2d32;} .about{color:#fff;} .padded-container{position:relative;padding-left:20px;padding-right:20px;width:100%;box-sizing:border-box;} section{margin-bottom:0;} .about__grid {display: -ms-grid;-ms-grid-columns: (1fr)[12];display: grid;grid-gap: 15px 10px;grid-template-columns: repeat(12,1fr);} .about__header-about {margin-bottom: 8px;font-size: 18px;font-weight: 400;line-height: 22px;} .about__header-showTitle {margin-bottom: 8px;font-size: 20px;font-weight: 400;line-height: 24px;} .about__header-tuneInTime, .about_page--tuneInTime {margin-bottom: 24px;font-size: 14px;font-weight: 400;line-height: 18px;color: #999;} .about__description.with-text-clamp {max-height: 182px;overflow: hidden;} .about__description {margin-bottom: 12px;} .about a {color: #0092f3;} .about__description.with-text-clamp .about__copy {display: -webkit-box !important;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;} .about__copy {font-size: 16px;line-height: 26px;-webkit-text-size-adjust: 100%;} .social {display: inline-flex;align-items: center;vertical-align: top;} .social-heading {font-size:13px!important;text-transform:uppercase;padding-right:5px;font-weight:300;} .social-icons .facebook,.social-icons .twitter {color: #fff;} .facebook:hover {color: #3b5998 !important;} .twitter:hover{color:#1da1f2 !important;} @media(min-width:768px){.about__grid > :nth-child(2) {grid-column: span 1;} .about__grid > :nth-child(3) {grid-column: span 8;} .about__grid > :nth-child(1) {grid-column: span 3;} .padded-container{padding-left:40px;padding-right:40px;} .about__header-showTitle {margin-bottom: 24px;font-size: 32px;font-weight: 700;line-height: 38px;} .about__header-about {margin-bottom: 24px;font-size: 20px;font-weight: 400;line-height: 24px;}} @media(min-width:1440px){.padded-container{padding-left:95px;padding-right:95px;}} @media(max-width:767px){.about__grid > * {grid-column: span 12;} .about__header-tuneInTime, .about_page--tuneInTime {margin-bottom: 25px;}}

Related: See More


Questions / Comments: