CODEWITHSUNDEEP
twitter-bootstrap
Un1xCr3w
Un1xCr3w

Reputation: 153

How to make the DIV full width in a small screen

I have a problem here with my design layout:

HTML:

<div class="col-lg-10 col-lg-offset-1">
    <img class="advertise-two img-responsive col-lg-12 col-xs-12 col-sm-12" src="http://placehold.it/1050x220" alt="" />
    <ul class="menus">
        <li>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
        </li>
    </ul><!-- /.menus -->
</div><!-- /.col-lg-10 col-lg-offset-1 -->

Looks like this: http://postimg.org/image/ffbjrbg8j/

But in a small screen it appears like this: http://postimg.org/image/71gbdxq81/

Any ideas?

Upvotes: 2

Views: 2235

Answers (2)

Loqman
Loqman

Reputation: 1580

Wrap your code in a div with class="row" and add col-xs-12 to your inner div:

<div class="row">
  <div class="col-lg-10 col-lg-offset-1 col-xs-12">
    ...
  </div>
</div>

Upvotes: 3

maioman
maioman

Reputation: 18744

you can center col-lg-10 using margin:0 auto (eliminate offset value)

and then add col-xs-12, something like :

<div class="col-lg-10 col-xs-12" style='margin: 0 auto'>

I can't be sure it will work because it also depends on the other markup you have (rows - contatiners - etc.)

Upvotes: 0

Related Questions