CODEWITHSUNDEEP
csstwitter-bootstrap
Hunterisabeast
Hunterisabeast

Reputation: 49

How can I make Bootstrap display content properly on mobile devices?

Just for the experience, I'm trying to re-create amazon.com with bootstrap 3. I've gotten a lot of it down, but the one thing that I can't seem to get is the mobile display. How can I keep the image inline with the text, but not stack the text when the screen goes to a portrait mobile display? I've got the viewport set, I've tried responsive images, but the issue seems to be how the text stacks. Can I disable that?

Heres a simple example of what I've got:

<div class="container">
<div class="row">
    <div class="col-xs-4">
<a href="#"><img src="image.jpg"></a>
    </div>
    <div class="col-xs-8">
      <ul class="list-unstyled">
           <li><h4>Product Title</h4></li>
           <li>Price</li>
           <li>*Review Stars*</li>
      </ul>
    </div>
</div>
</div>

When I open the page from my iPhone 6, the text from the titles will stack terrible (unless there is a short title).

Thanks!

Upvotes: 0

Views: 434

Answers (1)

Jamie
Jamie

Reputation: 26

As far as I know the whole idea of bootstrap is to adjust to the screen width and stack the content when needed. Say you had 12 products and you want 4 wide on computer screens (12 / 4 = "col-md-3") , and 2 wide in mobile screens (12 / 2 = "col-xs-6") - I added a background color for clarity: 

   <div class="container">
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed">
    <a href="#"><img class="img-responsive" src="image.jpg"></a>
    <ul class="list-unstyled">
       <li><h4>Product Title</h4></li>
       <li>Price</li>
       <li>*Review Stars*</li>
    </ul>
</div>

Hope this helps

Upvotes: 1

Related Questions