// // Responsive: Landscape phone to desktop/tablet // -------------------------------------------------- @media (max-width: 767px) { // Padding to set content in a bit body { padding-left: 20px; padding-right: 20px; } // Negative indent the now static "fixed" navbar .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: -20px; margin-right: -20px; } // Remove padding on container given explicit padding set on body .container-fluid { padding: 0; } // TYPOGRAPHY // ---------- // Reset horizontal dl .dl-horizontal { dt { float: none; clear: none; width: auto; text-align: left; } dd { margin-left: 0; } } // GRID & CONTAINERS // ----------------- // Remove width from containers .container { width: auto; } // Fluid rows .row-fluid { width: 100%; } // Undo negative margin on rows and thumbnails .row, .thumbnails { margin-left: 0; } .thumbnails > li { float: none; margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present } // Make all grid-sized elements block level again [class*="span"], .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing .row-fluid [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; .box-sizing(border-box); } .span12, .row-fluid .span12 { width: 100%; .box-sizing(border-box); } .row-fluid [class*="offset"]:first-child { margin-left: 0; } // FORM FIELDS // ----------- // Make span* classes full width .input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { .input-block-level(); } // But don't let it screw up prepend/append inputs .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] { display: inline-block; // redeclare so they don't wrap to new lines width: auto; } .controls-row [class*="span"] + [class*="span"] { margin-left: 0; } // Modals .modal { position: fixed; top: 20px; left: 20px; right: 20px; width: auto; margin: 0; &.fade { top: -100px; } &.fade.in { top: 20px; } } } // UP TO LANDSCAPE PHONE // --------------------- @media (max-width: 480px) { // Smooth out the collapsing/expanding nav .nav-collapse { -webkit-transform: translate3d(0, 0, 0); // activate the GPU } // Block level the page header small tag for readability .page-header h1 small { display: block; line-height: @baseLineHeight; } // Update checkboxes for iOS input[type="checkbox"], input[type="radio"] { border: 1px solid #ccc; } // Remove the horizontal form styles .form-horizontal { .control-label { float: none; width: auto; padding-top: 0; text-align: left; } // Move over all input controls and content .controls { margin-left: 0; } // Move the options list down to align with labels .control-list { padding-top: 0; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls .form-actions { padding-left: 10px; padding-right: 10px; } } // Medias // Reset float and spacing to stack .media .pull-left, .media .pull-right { float: none; display: block; margin-bottom: 10px; } // Remove side margins since we stack instead of indent .media-object { margin-right: 0; margin-left: 0; } // Modals .modal { top: 10px; left: 10px; right: 10px; } .modal-header .close { padding: 10px; margin: -10px; } // Carousel .carousel-caption { position: static; } }