CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
1110
1110

Reputation: 6829

Nested bootstrap grid - layout issue

I have a struggle with bootstrap framework.
I want to create a simple box with image on the left side and some text and other elements on the right side.
But having issue when it is displayed on small screens.

This is my current code.

<div class="col-md-8" style="margin-top: 3px;">
            <div class="feed-box">
                <div class="row">
                    <div class="col-md-1">
                        <img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250">
                    </div>
                    <div class="col-md-11">
                        <div class="row">
                            <p><a href="#">John Doe</a> announced something</p>
                        </div>
                        <div class="row">
                            <p>
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
                            </p>
                        </div>
                        <div class="row">
                            <a href="#">Comment</a>
                            <a href="#">Share</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I will explain it through images:
Desktop (it's fine this padding is not important here):
enter image description here
Small screen (bad):
enter image description here
What I am trying to make (in small screens):
enter image description here

Upvotes: 1

Views: 153

Answers (2)

James
James

Reputation: 4580

Use media queries to style the elements for small screen.

For example check this fiddle(resize to see the difference)

CSS used

@media (max-width: 800px){
    .feed-box .col-md-1{
      float:left;
    margin-bottom:8px;
    }
    .feed-box .col-md-11{
      margin-top:15px;
    }
}

Upvotes: 1

Intellidroid
Intellidroid

Reputation: 1055

You need to also specify the cols for smaller screens...i.e - you don't need to put in for md

<div class = "row">
   <div class = "col-sm-1">
   </div>
   <div class = "col-sm-11">
   </div>
</div>

Upvotes: 2

Related Questions