How to make an item responsive in twitter bootstrap

Question

I have a bootstrap theme i designed my self, its quite responsive, adjusts immediately screen size shrinks, but when i added some javascript functionality to an image making it have an overlay on hover, with some little css, the responsiveness of the image got distorted, it never shrinks, and i want the overlay to remain, please i'm pleading if anyone could help in making it retain its responsiveness .... This is html code snippet below, and some inline stylesheet, the rest stylesheets are twitter bootstrap default style sheets

<div class="container marketing" style="padding-top: 20px;">
<div class="row">
    <div class="span8"> 
        <span class="label label-info">EXCLUSIVE</span>
        <img id="d1" src="img-data/underage-marriage/nigeria-underage-marriage.jpg">
        <div class="contenthover" style="margin-top:10%;">
            <div class="row-fluid text-center" style="border-bottom:1px #CCC dashed; padding-bottom:3%;">
                <div class="span8" style="border-right:1px #CCC dashed; padding-right: 2%;">
                    <h1 class="pull-right" style="border-bottom:1px #CCC dashed;"><img src="img/brainstorm.png"><b><i>discussion</i></b></h1>
                  <h1><small class="pull-right">Keep your language clean.</small></h1>
                </div>
                <div class="span4" style="padding-top:3%;">
                    <button type="button" class="btn btn-large btn-danger pull-left" data-loading-text="Loading...">View Article</button>
                </div>
            </div>
            </div>
          </div>
          <div class="span4"></div>
        </div>
    </div>

<!-- stylesheet -->
<style>
  .contenthover { padding:20px 20px 10px 20px; }
  .contenthover, .contenthover h3, contenthover a { color:#fff; }
  .contenthover h3,
  .contenthover p {
    margin:0 0 10px 0; line-height:1.4em; padding:0;
  }                    
</style>

brother, i've added some inline stylying for the overlay box, the other stylesheets are bootsrap stylesheets ... — Nwachukwu A. Nnaemeka, Aug 11 '13 at 15:12
can you post a [fiddle](http://jsfiddle.net) that reproduces the problem? — omma2289, Aug 11 '13 at 20:36

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

Try to use this class and make sure it goes after your bootstrap.css files (such as inline) (I remember seeing this Stackoverflow question that may help you out - Images not responsive by default in Twitter Bootstrap 3? if you aren't using Bootstrap 3.0, this will still help.)

img {
      display: inline-block;
      height: auto;
      max-width: 100%;

}

Or you may have to make a separate media query for those images using something like this (for example)...

@media (max-width: 480px) {
}

edited May 23 '17 at 10:31

Community

1
1

answered Aug 11 '13 at 16:49

james

5,006
8
39
64

Just one small niggle: please don't recommend inline CSS - it's terrible practice and is difficult to maintain – Bojangles Aug 12 '13 at 06:10
I definitely agree. But occasionally people have issues with their CSS files not overriding bootstraps (just a matter of correct placement in the DOM & maybe they are inexperienced...no offense to the OP), so I mentioned it because I guess I was too lazy to explain what I just explained above. – james Aug 12 '13 at 12:06
A fair point, but the best way of doing something often requires the most effort `:)` – Bojangles Aug 12 '13 at 13:43

score 1 · Accepted Answer · answered Aug 11 '13 at 20:33

1

Try changing the class "row" to "row-fluid".

answered Aug 11 '13 at 20:33

Joe Conlin

5,976
5
25
35

How to make an item responsive in twitter bootstrap

2 Answers2