CODEWITHSUNDEEP
csstwitter-bootstrap-3
user1532669
user1532669

Reputation: 2378

How do I make my list of search results responsive?

I have a list of results that I want to make responsive. I have these results displaying roughly in the centre of the page with borders on the left and right which are whitespace. I want this whitespace to disappear as the browser is resized.

I'm using the following css:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">


#parent{ position: relative; width: 900px; left: 400px; background: #999;padding:10px;}

.child { position: relative; background:#ccc;min-height:250px;margin:20px;}

This is the html:

    <div id="parent" infinite-scroll="addMoreItems()" infinite-scroll-distance="1" infinite-scroll-disabled='busy'>
        <div class="child" ng-repeat="blah in blahs">
                Description: <br />{{Description}} <br /><br />
                StarRating: <br /> {{Rating}} <br /><br />

            <div ng-controller="weatherCtrl" ng-init="isCollapsed = !isCollapsed">
                <div>
                  <button ng-model="blah" class="btn btn-default" ng-click="loadWeather(blah, $index);">{{buttonText}} weather</button>
                  <hr>
                  <div collapse="isCollapsed">
                    <div class="well well-lg">Some content</div> 
                  </div>
                </div>  
            </div>

          <div style='clear: both;'></div>
        </div>
      <div ng-show='busy'><h1>Loading data...</h1></div>
    </div>

Upvotes: 1

Views: 641

Answers (1)

Matthew Lang
Matthew Lang

Reputation: 65

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">


#parent{ position: relative; width: 900px; left: 400px; background: #999;padding:10px;}

.child { position: relative; background:#ccc;min-height:250px;margin:20px;}

@media (max-width: 400px) {
  .child{margin:0px;}
  #parent{width:100%;}
}

That should be the css you want to use

Upvotes: 1

Related Questions