user3666246 user3666246 - 1 year ago 65
CSS Question

Bootstrap - controlling Well sizes as viewport changes

in this demo the form looks OK but in Safari - Responsive Design Mode on small screen (iphone) the form collapses too far.

codepen form demo

I tried stuff like media queries

/* Custom, iPhone Retina */

@media only screen and (min-width : 320px) {


but in this case it is just the well/form i want to control so I am not sure where to apply like a "min width" of well? or?

Answer Source

There are fundamental bootstrap issues. First you should use class="row" inside your container to separate each row.

Second, your form is inside of a div that is applying the class "col-xs-4" with your social icons. This is causing your well to collapse far too much. If you split those out into separate rows, or at least close the div using the "col-xs-4", that should fix your issue.

See my forked version of your page here: All I did was wrap the section with your social links in the following code.

<div class="row">
    <div class="col-xs-4">

And here is a link to the Bootstrap documentation where they talk about the use of rows: