Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Unsubscribed User
Unsubscribed User
17,284 Points

Trouble with Responsive.css

I'm working on a simple site, seen HERE. I'm having trouble with the responsive CSS code. When I test the site on ScreenFly it looks fine but when I pull it up on my phone I get a left to right scroll...which is making it hard to troubleshoot. Any suggestions would be helpful. Thanks.

Responsive.css

@media (max-width: 1200px) {


.navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: #fff;
    padding: 8px 5px 6px 5px;
}

.navbar-default .navbar-toggle i {
    color: #bbb;
    font-size: 2em;
}

.quote-buttons span {
    margin: 0 2px;
}






.projects-carousel {
    width: 950px!important;
}
}

@media (max-width: 1199px) {

.boxed-page, .boxed-page header {
    width: 100%;
}

.classic-testimonials {
    margin-bottom: 25px!important;
}

.tp-caption a.btn-system {
    font-size: 11px;
    padding: 4px 8px;
}

.contact-details {
    display: none!important;
}

.navbar-brand {
    padding: 25px 15px;
}

.navbar-default .navbar-nav {
    margin: 0 !important;
    top: 0;
}

ul.social-list {
    float: none !important;
    text-align: center;
}

ul.social-list li {
    float: none !important;
    display: inline-block;
}

.quote-buttons {
    text-align: center;
}

.copyright-section {
    text-align: center;
}

ul.footer-nav {
    display: block;
    float: none !important;
    text-align: center;
    margin-top: 10px;
}

ul.footer-nav li {
    display: inline-block;
    float: none;
    margin-left: 15px;
}

.page-banner {
    display: none;
    height: 95px;
    text-align: center;
}

ul.breadcrumbs {

    float: none;
}

ul.breadcrumbs li { 
    float: none;
    display: inline-block;
    float: left\0/;
}

.portfolio-4 .portfolio-item {
    width: 49.99%!important;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
}

.projects-carousel {
    width: 100% !important;
}

.pricing-tables .pricing-table {
    //width: 50% !important;
    margin-bottom: 15px;
}

.pricing-tables .highlight-plan {
    margin: 0;
}

.pricing-tables .pricing-table.highlight-plan .plan-name {
    padding: 15px 0;
}

.pricing-tables .pricing-table.highlight-plan .plan-signup {
    padding:25px 0;
}

.pricing-tables .pricing-table:hover {
    top: 0;
}

.milestone-block {
    margin-bottom: 25px;
    margin-right: 40px;
}

.fittext {
    font-size: 30px;
    line-height: 38px;
}

.team-member {
    text-align: center;
    margin-bottom: 30px;
}

.member-photo {
    display: inline-block;
    margin: 0 auto;
}

.easyPieChart {
    margin: 0 40px 20px 0;
}

.right-sidebar {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid #eee;
}

.sidebar .widget {
    margin-bottom: 35px;
}

}

@media (max-width: 768px) {

.tp-leftarrow,
.tp-rightarrow {
    display: none!important;
}

.tp-caption a.btn-system {
    display: none;
}

.history-box img {
    float: none;
    width: 100%;
}

.history-content {
    float: none;
    width: 100% !important;
}

.history-box span.history-date {
    right: inherit;
    left: 15px;
}

.portfolio-filter li {
    margin-bottom: 8px;
}

.portfolio-4 .portfolio-item {
    width: 100%!important;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 20px;
}

.milestone-block {
    margin-bottom: 20px;
    margin-right: 45px;
}

}
@media only screen and (max-width: 479px) { 

.top-bar  {
    text-align: center;
}

.navbar-default .navbar-nav {
    padding: 15px 0;
}

.show-search, .search-form {
    display: none;
}

ul.social-list li {
    margin: 0 3px;
}

ul.social-list li a i {
    font-size: 0.9em;
    display: block;
    width: auto;
    line-height: 30px;
    border: none!important;
}

ul.social-list li a:hover {
    background-color: transparent!important;
}

ul.social-list li a.facebook:hover {
    color: #507CBE;
}

ul.social-list li a.twitter:hover {
    color: #63CDF1;
}

ul.social-list li a.google:hover {
    color: #F16261;
}

ul.social-list li a.dribbble:hover {
    color: #E46387;
}

ul.social-list li a.linkdin:hover {
    color: #90CADD;
}

ul.social-list li a.tumblr:hover {
    color: #4D7EA3;
}

ul.social-list li a.flickr:hover {
    color: #E474AF;
}

ul.social-list li a.instgram:hover {
    color: #4D4F54;
}

ul.social-list li a.vimeo:hover {
    color: #87D3E0;
}

ul.social-list li a.skype:hover {
    color: #36C4F3
}

.navbar-default .navbar-toggle {
    margin-top: 15px;
    outline: none;
}

.navbar-default .navbar-nav > li > a {
    border: none;
    padding: 5px 10px;
    display: block;
    border: none !important;
    padding-right: 0;
}

.navbar-default .navbar-nav > li > a:after {
    display: none;
}

.navbar-default .navbar-nav > li > a:hover {
    opacity: 0.7;
}

.navbar-default .navbar-nav > li {
    margin-left: 0;
    display: block;
    margin-bottom: 5px;
    width: 100%
}

.navbar-default .navbar-nav > li.drop > a {
    padding-right: 10px;
}

.navbar-default .navbar-nav > li.drop > a {
    border-radius: 2px;
}

ul.dropdown, ul.sup-dropdown {
    opacity: 1!important;
    position: relative !important;
    visibility: visible !important;
    width: 100% !important;
    top: inherit !important;
    left: 0 !important;
    margin-top: 0 !important;
    background: #fff !important;
    padding-left: 20px !important;
    box-shadow: none !important;
}

ul.dropdown li, ul.sup-dropdown li {
    border-top: none;
}

.milestone-block {
    display: block;
    clear: left;
    margin-right: 0;
}

.btn-system {
    margin-bottom: 10px;
}

.easyPieChart {
    font-size: 24px;
    font-weight: 400;
    position: relative;
    text-align: center;
    display: inline-block;
    margin: 0 0 20px 0;
    overflow: hidden;
}

}




@media (min-width : 992px) and (max-width: 1199px) {

#main-slide .slider-content h2{
    margin-top: 35px;
    font-size: 25px;
}
#main-slide .slider-content h3{
    font-size: 12px;
    margin-top: 18px;
}

.slider.btn{
    padding: 5px 25px;
    margin-top: 5px;
    font-size: 16px;
}

}
@media (min-width : 781px) and (max-width: 991px) {

#main-slide .slider-content h2{
    margin-top: 35px;
    font-size: 25px;
}
#main-slide .slider-content h3{
    font-size: 12px;
    margin-top: 18px;
}

.slider.btn{
    padding: 5px 25px;
    margin-top: 5px;
    font-size: 16px;
}

}

@media (min-width : 480px) and (max-width: 780px) {

#main-slide .slider-content h2{
    margin-top: 35px;
    font-size: 20px;
}
#main-slide .slider-content h3{
    font-size: 12px;
    margin-top: 12px;
}

.slider.btn{
    padding: 5px 25px;
    margin-top: 5px;
    font-size: 16px;
}

}




@media (max-width : 479px) {

#main-slide {display: none;}

}
Unsubscribed User
Unsubscribed User
17,284 Points

Still having issues with this...this is what it looks like on my Iphone 6+. It's scrolling left to right and it's not suppose to...can't figure out why.

alt text

5 Answers

Unsubscribed User
Unsubscribed User
17,284 Points

Thank you Erik, that did not fix my problem but I adding this did...

body, html { overflow-x:hidden; }
Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Dana,

In the head section of your site, do you have the following meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

If you don't, add that in (again, in the head section of your site) and try your site again.

Erik

Unsubscribed User
Unsubscribed User
17,284 Points

Yes, that is exactly what I have.

Unsubscribed User
Unsubscribed User
17,284 Points
Unsubscribed User
Unsubscribed User
17,284 Points

Here's my index.html

<!doctype html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
<html lang="en">
<head>

  <!-- Basic -->
  <title>R.E.E. &amp; Associates</title>

  <!-- Define Charset -->
  <meta charset="utf-8">

  <!-- Responsive Metatag -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" href="http://www.ghostxray.com/ReeAss/favicon.ico" type="image/x-icon" />

  <!-- Page Description and Author -->
  <meta name="description" content="R.E.E. & Associates - Your Computer Experts">
  <meta name="author" content="R.E.E. &amp; Associates">

  <!-- Bootstrap CSS  -->
  <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="screen">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="/css/font-awesome.min.css" type="text/css" media="screen">


  <!--  CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="/css/style.css" media="screen">

  <!-- Responsive CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="/css/responsive.css" media="screen">

  <!-- Css3 Transitions Styles  -->
  <link rel="stylesheet" type="text/css" href="/css/animate.css" media="screen">

  <!-- Color CSS Styles  -->

  <link rel="stylesheet" type="text/css" href="/css/colors/blue.css" title="blue" media="screen" />




  <!-- Margo JS  -->
  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

  <script type="text/javascript" src="js/jquery.migrate.js"></script>
  <script type="text/javascript" src="js/modernizrr.js"></script>
  <script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/jquery.fitvids.js"></script>
  <script type="text/javascript" src="js/owl.carousel.min.js"></script>
  <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>
  <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
  <script type="text/javascript" src="js/jquery.appear.js"></script>
  <script type="text/javascript" src="js/count-to.js"></script>
  <script type="text/javascript" src="js/jquery.textillate.js"></script>
  <script type="text/javascript" src="js/jquery.lettering.js"></script>
  <script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
  <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
  <script type="text/javascript" src="js/jquery.parallax.js"></script>
  <script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
  <script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>

  <!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body>

  <!-- Container -->
  <div id="container"class="boxed-page">

    <!-- Start Header -->
    <div class="hidden-header"></div>
    <header class="clearfix">

      <!-- Start Top Bar -->
      <div class="top-bar color-bar">
        <div class="container">
         <div class="row">
          <div class="col-md-6">
            <!-- Start Contact Info -->
            <ul class="contact-details">
              <li><a href="#"><i class="fa fa-map-marker"></i> 5246 W 137th ST Hawthorne CA</a>
              </li>
              <li><a href="#"><i class="fa fa-envelope-o"></i> robert@reeassocites.com</a>
              </li>
              <li><a href="#"><i class="fa fa-phone"></i> 310 643 8636</a>
              </li>
            </ul>
            <!-- End Contact Info -->
          </div>
          <div class="col-md-6">
            <!-- Start Social Links -->
            <ul class="social-list">
              <li>
                <a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a>
              </li>
              <li>
                <a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
              </li>

            </ul>
            <!-- End Social Links -->
          </div>
        </div>
      </div>
    </div>
    <!-- End Top Bar -->

    <!-- Start Header ( Logo & Naviagtion ) -->
    <div class="navbar navbar-default navbar-top">
      <div class="container">
       <div class="navbar-header">
        <!-- Stat Toggle Nav Link For Mobiles -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <i class="fa fa-bars"></i>
       </button>
       <!-- End Toggle Nav Link For Mobiles -->
       <a class="navbar-brand" href="index.html"><img alt="" src=""></a>
     </div>
     <div class="navbar-collapse collapse">
      <!-- Stat Search -->
      <div class="search-side">
        <a href="#" class="show-search"><i class="fa fa-search"></i></a>
        <div class="search-form">
          <form autocomplete="off" role="search" method="get" class="searchform" action="#">
            <input type="text" value="" name="s" id="s" placeholder="Search the site...">
          </form>
        </div>
      </div>
      <!-- End Search -->
      <!-- Start Navigation List -->
      <ul class="nav navbar-nav navbar-right">
       <li>
        <a class="active" href="index.html">Home</a>

      </li>
      <li>
        <a href="services.html">Services</a>
 <!--  <ul class="dropdown">
    <li><a href="about.html">Business</a></li>
    <li><a href="services.html">Home</a></li>
  </ul> -->
</li> 
<li><a href="facts.html">10 Facts</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- End Navigation List -->
</div>
</div>
</div>
<!-- End Header ( Logo & Naviagtion ) -->

</header>
<!-- End Header -->




<!-- Start HomePage Slider -->

<section id="home"> 
  <!-- Carousel -->
  <div id="main-slide" class="carousel slide" data-ride="carousel">

   <!-- Indicators -->
   <ol class="carousel-indicators">
    <li data-target="#main-slide" data-slide-to="0" class="active"></li>
    <li data-target="#main-slide" data-slide-to="1"></li>
    <li data-target="#main-slide" data-slide-to="2"></li>
  </ol><!--/ Indicators end-->

  <!-- Carousel inner -->
  <div class="carousel-inner">
   <div class="item active">
    <img class="img-responsive" src="http://www.ghostxray.com/ReeAss/SliderBG.jpg" alt="slider">
    <div class="slider-content">
      <div class="col-md-12 text-center">
        <h2 class="animated2">
          <span>Welcome to <strong>R.E.E. & Associates</strong></span>

        </h2>
        <h3 class="animated3">
         <span>Your Computer Experts</span>
       </h3>
       <!-- <p class="animated4"><a href="#" class="slider btn btn-system btn-large">Place Order</a></p> -->
     </div>
   </div>
 </div><!--/ Carousel item end -->
 <div class="item">
  <img class="img-responsive" src="http://www.ghostxray.com/ReeAss/Slider2BG.jpg" alt="slider">
  <div class="slider-content">
    <div class="col-md-12 text-center">
      <h2 class="animated2">
        <span><strong></strong> </span>
      </h2>
      <h2 class="animated2">
       <span>Complete Computer <strong>Solutions</strong></span>
     </h2>
     <h3 class="animated3">
       <span>we're here so you can concentrate on your business.</span> 
     </h3> 
     <!-- <p class="animated6"><a href="#" class="slider btn btn-system btn-large">Buy Now</a></p>     -->   
   </div>
 </div>
</div><!--/ Carousel item end -->
<div class="item">
  <img class="img-responsive" src="http://www.ghostxray.com/ReeAss/SlideBG3.jpg" alt="slider">
  <div class="slider-content">
    <div class="col-md-12 text-center">
      <h2 class="animated2">
        <span>10 Facts <strong>You Should Know</strong></span>
      </h2>
      <h3 class="animated3">
       <span>A list of things you should know</span>
     </h3>    
     <div class="">
      <a class="animated2 slider btn btn-system btn-large btn-min-block" href="facts.html">More</a>
    </div>     
  </div>
</div>
</div><!--/ Carousel item end -->
</div><!-- Carousel inner end-->

<!-- Controls -->
<a class="left carousel-control" href="#main-slide" data-slide="prev">
 <span><i class="fa fa-angle-left"></i></span>
</a>
<a class="right carousel-control" href="#main-slide" data-slide="next">
 <span><i class="fa fa-angle-right"></i></span>
</a>
</div><!-- /carousel -->      
</section>
<!-- End HomePage Slider -->



<!-- Start Content -->
<div id="content">
  <div class="container">
    <div class="page-content">


      <div class="row">

        <div class="col-md-8">

          <!-- Classic Heading -->
          <h4 class="classic-title"><span>Welcome To R.E.E. &amp; Associates</span></h4>

          <!-- Some Text -->
          <h3><strong>R.E.E &amp; Associates delivers complete computer solutions for large corporations, small businesses, or individuals in the greater Los Angeles area.  </strong></h3>
          <br>


          <dl>
           <dt><strong>Staff Certifications Includes:</strong></dt>
           <ul class="fa-ul">
            <li> <i class="fa-li fa fa-certificate"></i>  Microsoft &reg;</li>
            <li> <i class="fa-li fa fa-certificate"></i>  CompTIA A+ &reg;</li>
            <li> <i class="fa-li fa fa-certificate"></i>  Cisco &reg;</li>
            <li> <i class="fa-li fa fa-certificate"></i>  IBM &reg;</li>
            <li> <i class="fa-li fa fa-certificate"></i>  Compaq &reg;</li>
            <li> <i class="fa-li fa fa-certificate"></i>  Hewlett Packard &reg; and more</li>
          </ul>
          <span><strong>We bring resolution quickly and efficiently to computer issues that affect your company's productivity.</strong></span>
        </dl>
        <br>
        <dl>
          <dt><strong>We Are:</strong></dt>
          <ul class="fa-ul">
            <li> <i class="fa-li fa fa-check-square"></i>  Aware of the changing technology needed to fix today's complex computers.</li>
            <li> <i class="fa-li fa fa-check-square"></i>  Up-to-date through on-going training.</li>
            <li> <i class="fa-li fa fa-check-square"></i>  Continuing to meet top quality standards of technical support.</li>
          </ul>
        </dl>
        <dl>
          <dt><strong>Our Pledge:</strong></dt>
          <dd> As a member of the greater Los Angeles business community, we adhere to a Code of Ethics. Our pledge is to provide you service with honesty, integrity, efficiency, and professionalism.</dd>
        </dl>
        <br>
        <dl>
          <dt><strong>Our Vision:</strong></dt>
          <dd> We are here - Quite Simply - to provide the finest possible assistance.</dd>
        </dl>

      </div>


      <!-- Divider -->
      <div class="hr1" style="margin-bottom:50px;"></div>

      <div class="row">

        <div class="col-md-6">

          <!-- Classic Heading -->
          <h4 class="classic-title"><span>Our Skills</span></h4>

          <div class="skill-shortcode">
            <div class="skill">
              <p>Computer &amp; Printer Support</p>          
              <div class="progress">         
                <div class="progress-bar" role="progressbar"  data-percentage="100">
                  <span class="progress-bar-span" >100%</span>
                  <span class="sr-only">60% Complete</span>
                </div>
              </div>  
            </div>
            <div class="skill">
              <p>Web Services for Advertising</p>          
              <div class="progress">          
                <div class="progress-bar" role="progressbar"  data-percentage="100">
                  <span class="progress-bar-span" >100%</span>
                  <span class="sr-only">60% Complete</span>
                </div>
              </div>  
            </div>
            <div class="skill">
              <p>Strategic Planning for your Business</p>          
              <div class="progress">          
                <div class="progress-bar" role="progressbar"  data-percentage="100">
                  <span class="progress-bar-span" >100%</span>
                  <span class="sr-only">60% Complete</span>
                </div>
              </div>  
            </div>
            <div class="skill">
              <p>Documentation and Training</p>          
              <div class="progress">          
                <div class="progress-bar" role="progressbar"  data-percentage="100">
                  <span class="progress-bar-span" >100%</span>
                  <span class="sr-only">60% Complete</span>
                </div>
              </div>  
            </div>                              
          </div>

        </div>

        <div class="col-md-6">

          <!-- Classic Heading -->
          <h4 class="classic-title"><span>Our Services</span></h4>

          <!-- Accordion -->
          <div class="panel-group" id="accordion">

            <!-- Start Accordion 1 -->
            <div class="panel panel-default">
              <!-- Toggle Heading -->
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
                    <i class="fa fa-angle-up control-icon"></i>
                    <i class="fa fa-building"></i> Business
                  </a>
                </h4>
              </div>
              <!-- Toggle Content -->
              <div id="collapse-1" class="panel-collapse collapse in">
                <div class="panel-body"><img class="img-thumbnail image-text" style="float:left; width:150px;" alt="" src="http://www.ghostxray.com/ReeAss/Theme/images/business1.jpg" /> <strong class="accent-color">Business Solutions:</strong>  Installation of new computers, printers, all new hardware and software.
                  Trouble Shooting your existing systems and reporting findings to give alternative solutions.
                  Repair of all hardware and software* in house.
                  Maintanance of your systems so you don’t have to think about it.</div>
                </div>
              </div>
            </div>
            <!-- End Accordion 1 -->

            <!-- Start Accordion 2 -->
            <div class="panel panel-default">
              <!-- Toggle Heading -->
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse-2" class="collapsed">
                    <i class="fa fa-angle-up control-icon"></i>
                    <i class="fa fa-home"></i> Home
                  </a>
                </h4>
              </div>
              <!-- Toggle Content -->
              <div id="collapse-2" class="panel-collapse collapse">
                <div class="panel-body"><img class="img-thumbnail image-text" style="float:left; width:150px;" alt="" src="http://www.ghostxray.com/ReeAss/Theme/images/Home.png" /><strong class="accent-color">Home Solutions:</strong> Hardware (including computers, monitors, printers, Modems, Routers or other devices). Software (operating systems, Microsoft products, or other software). Network solutions (including wireless networking).
                </div>
              </div>
            </div>
            <!-- End Accordion 2 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




<!-- Start Footer -->
<footer>

  <!-- Start Copyright -->
  <div class="copyright-section">
    <div class="row">
      <div class="col-md-6">
        <p>&copy; R.E.E. &amp; Associates -  All Rights Reserved</p>
      </div>
    </div>
  </div>
  <!-- End Copyright -->

</div>
</footer>
<!-- End Footer -->

</div>
<!-- End Container -->

<!-- Go To Top Link -->
<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>

<div id="loader">
 <div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
</div>
</body>
</html>
Unsubscribed User
Unsubscribed User
17,284 Points
Unsubscribed User
Unsubscribed User
17,284 Points

I'm still having issues nailing down my problem. I still get side to side scroll via mobile. Does anyone see what needs to be fixed? Thanks.

http://reeassociates.com/

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Dana,

Upon a quick inspection in Google's Dev Tools, the added page width is removed when you get rid of the following property:

.row {
    margin-right: -15px;
}

Start by removing that (of course, making sure it doesn't negatively affect your site elsewhere) and see if that helps.

Erik

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Looks like that's a style from Bootstrap.