body { padding-top: 60px; /* background-color: #eee; */ } .form-group { display: block !important; } .list-group-item { padding: 5px 10px 5px 10px; } .nav .btn { color: #fff; background-color: #474949; border-color: #323333; } .nav .btn-default:hover, .nav .btn-default:focus, .nav .btn-default:active, .nav .btn-default.active { background-color: #3a3c3c; border-color: #2e2f2f; } #signin { width: 100%; } #filters hr { margin-top: 15px; margin-bottom: 5px; } #addTaskInput { width: 100%; } #addTaskInput input { width: 75%; } #addTaskInput button { width: 24%; } .tasksHeading { padding-bottom: 10px; } .taskList { padding-top: 10px; } .taskListItem { padding: 8px 0 8px 5px; border-bottom: 1px solid #d3d7cf; } .completeBox { height: 28px; width: 28px; position: absolute; margin-top: 5px; border: 3px solid #00a5e6; -moz-border-radius: 25%; border-radius: 25%; } .taskRowTop { padding-left: 45px; cursor: pointer; } .taskRowBottom { padding: 1px 0 1px 45px; } @media (max-width: 768px) { #filters hr { margin-top: 2px; margin-bottom: 10px; } #signin { width: 90%; } #addTaskInput input { width: 100%; margin-bottom: 15px; } #addTaskInput button { width: 100%; } .navbar-brand { display: block; float: none; padding: 15px; max-width: 200px; margin: 0 auto; text-align: center; } } @media (max-width: 480px) { #filters { display: none; } .tasksHeading { text-align: center; margin-top: 5px; } }