Some divs not responding properly in Bootstrap V3

Question

I have a question that has been annoying me for some time. It should be simple I just cant figure it out.

Basically, on Chrome, most of the divs created on the page http://loveireland.evolvedublin.com/tours/ resize properly when changing the browser size, but there are a couple that overlap eachother. Between 768px and 991px (so the media queries) the post for National Wax Museum overlaps with Dublin Zoo. This happens further down the page with a couple of other posts, but the majority of the page is fine.

This is not an issue in Firefox.

Also, when the screen is below 767px, most of the divs then overlap eachother vertically.

I have tried adding in <div class="clearfix"></div> in various locations. I have tried differing variations of col-**-4 which has not helped and I have also tried amending floats but cant seem to get anything to work.

Sample of post HTML:

<div id="post-250" class="post-250 tours type-tours status-publish hentry col-lg-4 col-md-4 tour-thumb element-item" >
<div class="tour-frame">
    <div class="tour-thumb-img">
        <a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">
            <img src="http://loveireland.evolvedublin.com/wp-content/uploads/2014/05/Dublin-Zoo2.jpg"  class="img-responsive" alt=""/>
        </a>
    </div><!--tour-thumb-img-->
    <div class="tour-thumb-text">
        <!--TOUR TITLE-->
        <h2 class="az za"><a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">Dublin Zoo</a></h2>
        <!--TOUR EXCERPT--> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis semper lorem, in volutpat mi adipiscing se                       
            <div class="thumb-footer">
                <div class="tripadvisor">
                    <img src="http://loveireland.evolvedublin.com/wp-content/themes/loveireland/images/trip-advisor-icon.png" class="trip-icon" alt="Trip Advisor Icon" />
                </div><!--trip-advisor-->
                <div class="green-btn">
                    <a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">VIEW TOUR</a>
                </div><!--green-btn-->
            </div><!--thumb-footer-->

            <div class="clearfix clear"></div>

    </div><!--tour-thumb-text-->

</div><!--tour-frame-->

CSS Used:

.tour-thumb{
margin: 0 0 30px 0;
}

.tour-frame{
border: 1px solid #e5e5e5;
background-color:#ffffff;
height:100%;
}

.tour-thumb-text{
padding: 0 10px 20px 10px;}

.tour-thumb a{
text-decoration:none;}

@media(max-width:767px){}
@media(min-width:768px){.tour-thumb{max-width: 357px !important; height: 390px;}}
@media(min-width:992px){.tour-thumb{max-width: 233px !important; height: 350px;}}
@media(min-width:1200px){.tour-thumb{max-width: 290px !important; height: 350px;}}

.tour-thumb h2{
font-size:12px;
font-weight:bold;
text-transform: uppercase;}

.tour-thumb h2 a{
color: #000000;
letter-spacing:2px;}

.tour-thumb h2 a:hover{
text-decoration:underline;}

.tour-thumb p{
font-size:14px;
letter-spacing:1px;}

.tour-thumb-img{
position:relative;}

.tour-thumb-price{
background: rgb(255,255,255);
background: rgba(255,255,255,0.9);
/*box-shadow: 0px 0px 10px #999999;*/
border: 1px solid #e5e5e5;
border-top: none;
position: absolute;
top:0;
right: 10px;
text-align:center;
padding: 10px;}

.tour-thumb-price h3{
font-size:18px;
font-weight:bold;
color:#8ac736;
padding: 0 0 0 0;
margin: 0 0 0 0;}

.tour-thumb-price p{
font-size:8px;
font-weight:bold;
padding: 0 0 0 0;
margin: 0 0 0 0;}

.thumb-footer{
display:block;
padding-top:10px;}

.tour-thumb .social{
display:inline-block;
float:left;
padding: 6px 0 6px 0;}

.tour-thumb .social img{
border:none;
margin-right:10px;}

.tour-thumb .social a{
color: #ffffff;}

.tour-thumb .green-btn{
float:right;
position:absolute;
right:20px;
/*margin-top:13px;*/}

.tour-thumb .tripadvisor{
/*margin-bottom:30px;*/
float:left;}

.tripadvisor img.trip-icon{
display:inline-block;
margin-top:4px;
float:left;}

.TA_cdsratingsonlynarrow{
display:inline-block;
float:left;}

.tour-detail .cdsROW.narrow{
text-align:left !important;
background-color:#fafafa; !important}

.tour-thumb .cdsROW.narrow{
text-align:left !important;
background-color:#ffffff; !important}

As mentioned, this works in Firefox, although, when the screen is smaller that 767px, the columns do not actually resize which is also an issue does not happen in Chrome oddly enough!

Hopefully someone can help as I am very stuck.

Cheers

Answer 1

With help from @Miktown, I added the following to my css which solved the issue:

@media (min-width: 768px) and (max-width: 991px){
    .tour-thumb {
       width:50% !important;
    }

}
@media (max-width: 767px){
    .tour-thumb {
     width:96% !important;
    }

}

Answer 2

In the link you post there are css inline in the div adding position:absolute and left and top values, remove it or try to override it with:

@media (min-width: 768px){
    .tour-thumb {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      float: left;
    }
}