CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
SNaRe
SNaRe

Reputation: 2067

Full width Responsive Images Overlap Bootstrap 3

I created a grid with col-md-7 on the left and col-md-5 on the right. And I put images to the col-md-5, which are responsive and in col-md-12 width - full width

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-7">LEFT SIDE</div>
                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-12">
                            <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
                        </div>
                        <div class="col-md-12">
                            <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
                        </div>
                        <div class="col-md-12">
                            <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Demo : http://jsfiddle.net/r8rFc/298/

It works great without any problems. However, I use a menu called Zozo UI tabs. When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other. Thus, it just show the last IMG

I would add the whole code to here but unfortunately it has a lot of dependencies.

Please check from here.

xxx 

    <!-- Overview -->
    <div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
        <div class="z-content-inner">
            <div class="row">
                <div class="col-md-7">
                    <div class="row">
                        <div class="col-md-12">
                        LEFT
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-12">
                            <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
                        </div>
                        <div class="col-md-12">
                            <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
                        </div>
                        <div class="col-md-12">
                            <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
                        </div>
                    </div>
                </div>
            </div>                           
        </div>
    </div>
</div>

Need a way to get that images on the top of each other rather than overlapping.

Upvotes: 1

Views: 300

Answers (1)

Alexa
Alexa

Reputation: 1090

You have 

.productgroup img {
    position: absolute;
}

it seems to be the reason of your problem.

Upvotes: 2

Related Questions