CODEWITHSUNDEEP
htmlcsstwitter-bootstrapimage-scaling
Nick
Nick

Reputation: 165

Images are not resizing outside of mobile view - Bootstrap

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>

Upvotes: 4

Views: 543

Answers (2)

Mads Andersen
Mads Andersen

Reputation: 101

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.

Upvotes: 1

Virendra Nagda
Virendra Nagda

Reputation: 658

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

Upvotes: 0

Related Questions