nth-child clearing wrong div

I have a css value that is supposed to clear bootstrap columns on desktops above 1200px within the content div. The css should be clearing every 4th div on large screens and every 3rd on medium screens but the first row is always clearing one column too early – each proceeding row appears fine.

I would assume this means that I have an extra div somewhere before the others but I don’t see one in the code. Example: http://wordpress-24251-52108-171506.cloudwaysapps.com/who-we-are/staff/

My code below:

/*  Bootstrap Clearfix */

/*  Tablet  */
@media (min-width:767px){

  /* Column clear fix */
  #content .row .col-lg-1:nth-child(12n+1),
  #content .row .col-lg-2:nth-child(6n+1),
  #content .row .col-lg-3:nth-child(4n+1),
  #content .row .col-lg-4:nth-child(3n+1),
  #content .row .col-lg-6:nth-child(2n+1),
  #content .row .col-md-1:nth-child(12n+1),
  #content .row .col-md-2:nth-child(6n+1),
  #content .row .col-md-3:nth-child(4n+1),
  #content .row .col-md-4:nth-child(3n+1),
  #content .row .col-md-6:nth-child(2n+1){
    clear: none;
  }
  #content .row .col-sm-1:nth-child(12n+1),
  #content .row .col-sm-2:nth-child(6n+1),
  #content .row .col-sm-3:nth-child(4n+1),
  #content .row .col-sm-4:nth-child(3n+1),
  #content .row .col-sm-6:nth-child(2n+1){
    clear: left;
  }
}


/*  Medium Desktop  */
@media (min-width:992px){

  /* Column clear fix */
  #content .row .col-lg-1:nth-child(12n+1),
  #content .row .col-lg-2:nth-child(6n+1),
  #content .row .col-lg-3:nth-child(4n+1),
  #content .row .col-lg-4:nth-child(3n+1),
  #content .row .col-lg-6:nth-child(2n+1),
  #content .row .col-sm-1:nth-child(12n+1),
  #content .row .col-sm-2:nth-child(6n+1),
  #content .row .col-sm-3:nth-child(4n+1),
  #content .row .col-sm-4:nth-child(3n+1),
  #content .row .col-sm-6:nth-child(2n+1){
    clear: none;
  }
  #content .row .col-md-1:nth-child(12n+1),
  #content .row .col-md-2:nth-child(6n+1),
  #content .row .col-md-3:nth-child(4n+1),
  #content .row .col-md-4:nth-child(3n+1),
  #content .row .col-md-6:nth-child(2n+1){
    clear: left;
  }
}


/*  Large Desktop  */
@media (min-width:1200px){

  /* Column clear fix */
  #content .row .col-md-1:nth-child(12n+1),
  #content .row .col-md-2:nth-child(6n+1),
  #content .row .col-md-3:nth-child(4n+1),
  #content .row .col-md-4:nth-child(3n+1),
  #content .row .col-md-6:nth-child(2n+1),
  #content .row .col-sm-1:nth-child(12n+1),
  #content .row .col-sm-2:nth-child(6n+1),
  #content .row .col-sm-3:nth-child(4n+1),
  #content .row .col-sm-4:nth-child(3n+1),
  #content .row .col-sm-6:nth-child(2n+1){
    clear: none;
  }
  #content .row .col-lg-1:nth-child(12n+1),
  #content .row .col-lg-2:nth-child(6n+1),
  #content .row .col-lg-3:nth-child(4n+1),
  #content .row .col-lg-4:nth-child(3n+1),
  #content .row .col-lg-6:nth-child(2n+1){
    clear: left;
  }
}

Read more here: nth-child clearing wrong div

Leave a Reply

Your email address will not be published. Required fields are marked *