4

I am working on a container-fluid full width site with a fixed side bar using bootstrap.

http://nickmask.github.io/index.html

My images in my mainContent container are not re-sizing at the tablet size or above. If I drop down to mobile size they resize fine.

I have tried adding img-responsive, but no luck. Any ideas?

HTML:

<div class="col-sm-8 fluidContainer" id="mainContainer">
    <div class="mainHeading">
      <hr class="separator" id="topSep">
      <h1>Recent Work</h1>
      <h2>Blogs and projects recently completed</h2>
      <hr class="separator" id="botSep">
    </div>
    <div class="mainContent">
      <article>
        <img src="http://fillmurray.com/700/280" alt="" class="img-responsive">
        <h2>This article</h2>
        <p>   
          Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous comparison middletons at. Park we in lose like at no. An so to preferred convinced distrusts he determine. In musical me my placing clothes comfort pleased hearing.
        </p>     
      </article>
Senjuti Mahapatra
  • 2,570
  • 4
  • 27
  • 38
Nick
  • 135
  • 8

2 Answers2

1

The reason is because you have width: auto; on your #mainContainer. Remove width: auto; from #mainContainer and add the class img-responsive to the images and it should work.

Mads Andersen
  • 101
  • 2
  • 9
0

In bootstrap css max-width: 100%;. you change width: 100%; and same height. set width and hight.

Virendra Nagda
  • 673
  • 5
  • 9