asked on

Responsive rendering issue

I am building this page using bootstrap:
http://goo.gl/sUPSwe

when I view it on mobile, the orange email widget that says "Subscribe for more LOL's" becomes elongated. I cannot figure out how to resolve this to the box displays at a normal height. Any help is appreciated.
incorrect.jpg

Russ Suter

you've assigned the class "col-md-4" to the div which is fine for a regular layout but you need to specify additional classes for smaller layouts. Try setting the css class as follows:

<div class="col-md-4 col-sm-4 col-xs-6">

Open in new window

Bootstrap uses media queries to format the width of these elements. the col-md-4 class is only used if the minimum width of the screen is 992 pixels. If you fall below that it doesn't apply the class and the div reverts to its default behavior of 100% width.

By adding col-sm-4 it will now apply the style when the minimum width >= 768 pixels. col-xs-6 will be applied when the width < 768 pixels.

The number in the style represents 1/12th of the overall width. so the CSS above means that if the screen is >= 768 pixels wide the div will use up 1/3 of the width. If the screen shrinks below that it'll use 1/2 of the width.

You can play with the numbers to get the desired layout. You'll also have to assign the classes to your other divs in the same row for best results.

Larry Vollmer

ASKER

That made some progress, but the div seems to slice in half on mobile view now. I made the change around line 317 FYI.

ASKER CERTIFIED SOLUTION

Russ Suter

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial