-1

I have 3 column in a wrapper div and each div has two div's one with image and one with text.

I want to make it responsive so that image % text share 50% of area and at certain point text is visible & image is hidden or vice versa.

http://codepen.io/anon/pen/meWYeQ?editors=110

<div class="container">
        <div class="row inner-wrapper">
            <div class="row footer-quick-links">
                <!--
                        <div class="col-xs-12 col-sm-6 col-md-4 bk-blue no-padding">
                            One
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4 bk-dark-blue no-padding">
                            Two
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4 bk-magenta no-padding">
                            Three
                        </div>
                -->
                <div class="footer-ql-box bk-dark-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>OUR MISSION</span></div></div>
                <div class="footer-ql-box bk-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>VISION</span></div></div>
                <div class="footer-ql-box bk-magenta"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>CONTACT</span></div></div>
            </div>
        </div>
    </div>
Learning
  • 19,469
  • 39
  • 180
  • 373
  • as per the link you are using bootstrap plz make use of the default class there will no need to take care for the responsive class – saurabh kamble Oct 05 '15 at 07:00

1 Answers1

1

Add a 100% to the width to the image inside image box and drop the absolute positioning of the image box itself (so the image properly scales it's half).

.footer-ql-box img{width:100%; height: 100px;}
.f-img-box{float:left;width:49%;}

Note forcing the height to 100px allows it so the height of the image does not scale down when the window shrinks.

Example

Spencer Wieczorek
  • 21,229
  • 7
  • 44
  • 54
  • Is there a way we can trim image on side to that it doent look disoriented – Learning Oct 05 '15 at 06:26
  • You could replace the image with a `
    ` containing a background image, [see this answer for how to do that](http://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion-of-an-image-in-html-css). But it can't be done with just using ``, as that tag is meant to show the entire image.
     – Spencer Wieczorek Oct 05 '15 at 06:29