CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Igor Tiulkanov
Igor Tiulkanov

Reputation: 596

Bootstrap form page is not displayed properly on small size screens

I'm editing a bootstrap countdown page, and currently I'm stuck with this form. While on big screens it is look good, once I get it smaller than 800 px it started to see more like that... Any suggestions on fixing it?

Here is the code: 

<div id="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <h1>WeBuild</h1>
                <h2 class="subtitle">We're working hard to improve our website and we'll ready to launch after</h2>
                <div id="countdown"></div>
                <form class="form-inline signup" role="form">
                  <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter your email address">
                  </div>
                  <button type="submit" class="btn btn-theme">Get notified!</button>
                </form>     

            </div>

Upvotes: 1

Views: 1619

Answers (1)

Nate Barbettini
Nate Barbettini

Reputation: 53600

Per the Bootstrap docs, col-xs-* is what handles "extra small" devices (less than 768px). Also,

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

In other words, you don't need all three grid classes on your div. If you want it to be a -col-12 across all devices, try:

<div class="col-xs-12">

Edit - Fixed the fiddle posted by Preben: http://jsfiddle.net/jxmoe88g/1/

Upvotes: 4

Related Questions