Responsive rendering issue

I am building this page using bootstrap:

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.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterSenior Software DeveloperCommented:
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.
lvollmerAuthor Commented:
That made some progress, but the div seems to slice in half on mobile view now.  I made the change around line 317 FYI.
Russ SuterSenior Software DeveloperCommented:
You'll need to assign classes to the div to the left also. Basic rule that I go by when dealing with these elements in a Bootstrap layout is that I should have col-??-# set properly for each screen resolution breakpoint and for all elements inside the row div.

This means that if I have 2 divs in a row and one has a class of "col-sm-4" the other one needs to have "col-sm-8" to balance it out. Your first div in the row is missing that class. The sum of all col-sm-# classes should be 12 if you want the row to extend the full width.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.