/* 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; } .dl-horizontal 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"], .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 { display: block; width: 100%; min-height: 30px; box-sizing: border-box; } /* 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; 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; } .modal.fade { top: -100px; } .modal.fade.in { top: 20px; } } /* UP TO LANDSCAPE PHONE */ @media (max-width: 480px) { /* Block level the page header small tag for readability */ .page-header h1 small { display: block; line-height: var(--base-line-height); } /* 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 */ .form-horizontal .controls { margin-left: 0; } /* Move the options list down to align with labels */ .form-horizontal .control-list { padding-top: 0; } /* Move over buttons in .form-actions to align with .controls */ .form-horizontal .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; } }