src/components/responsive.css
@media (min-width: 1200px) {
/*margins*/
main {
margin: 5rem 0;
}
section {
margin: 5rem 0;
}
main [class^="col-"] {
margin-top: 5rem;
margin-bottom: 5rem;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*margins*/
main {
margin: 4rem 0;
}
section {
margin: 4rem 0;
}
main [class^="col-"] {
margin-top: 4rem;
margin-bottom: 4rem;
}
}
/* Medium Devices, Desktops */
@media (max-width: 1024px) {
}
/* Small Devices, Tablets */
@media (min-width: 768px) and (max-width: 991px) {
/*margins*/
main {
margin: 3rem 0;
}
section {
margin: 3rem 0;
}
main [class^="col-"] {
margin-top: 3rem;
margin-bottom: 3rem;
}
.upload_img {
display: none;
}
.slicknav_menu {
display: block;
}
ul#manu {
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.slicknav_menu {
font-size: 16px;
box-sizing: border-box;
background: #0068ea;
padding: 8px 0;
position: absolute;
right: 0;
}
.error-description {
margin: 80px 0 0 0;
}
.error-img {
float: none;
margin: 0 auto;
width: 100%;
}
}
/* Small Devices Potrait */
@media (max-width: 767px) {
.form_title {
margin-bottom: 3em;
}
.upload-filename {
max-width: 250px
}
.bordered {
border: 0;
}
.logo span {
display: none;
}
.logo img {
max-height: 50px;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
button.btn-upload {
width: 100%;
display: block;
}
/*margins*/
main {
margin: 0 0 2rem 0;
}
section {
margin: 2rem 0;
}
main [class^="col-"] {
margin-top: 2rem;
margin-bottom: 2rem;
}
.upload_img {
display: none;
}
.slicknav_menu {
display: block;
}
ul#manu {
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.slicknav_menu {
font-size: 16px;
box-sizing: border-box;
background: #0068ea;
padding: 8px 0;
position: absolute;
right: 0;
z-index: 9999;
}
.logo_img {
width: 46%;
}
/* mobile fix: centers, declutters, and wraps the UI */
.choice-wrapper {
flex-wrap: wrap;
}
.choice-section {
padding: 50px 5px 0 5px;
}
.choice-wrapper .tangle-image {
display: none;
}
.slide .container {
flex-direction: column;
}
.slide-image-wrapper {
order: -1;
}
.slide-custom-image {
padding-top: 25px;
position: relative;
}
.slide-tangle-image {
display: none;
}
.slide-body {
padding-top: 25px;
}
.upload_button {
text-align: center;
}
.upload_button .primary-button {
margin-top: 20px;
}
.handle-instructions {
padding-bottom: 50px
}
.retrieving-invoice-spinner {
margin: 50px auto;
}
.error-description {
margin: 60px 0 0 0;
font-size: 15px;
}
.error-img {
float: none;
margin: 60px auto 0 auto;
width: 100%;
}
}
/* Extra Small Devices, Phones */
@media (max-width: 479px) {
.upload_img {
display: none;
}
.rights {
width: 100%;
float: left;
}
.lefts {
width: 100%;
float: left;
}
.years {
float: right;
text-align: left;
width: 71%;
}
input[type="range"] {
margin-bottom: 25px;
}
button.btn-uplaod {
width: 100%;
}
input[type="range"] {
width: 100%;
}
select,
input:not([type="range"]) {
width: 100%;
}
.btn.btn-default.image-preview-input {
margin-right: 0;
}
.slicknav_menu {
display: block;
}
ul#manu {
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.slicknav_menu {
font-size: 16px;
box-sizing: border-box;
background: #0068ea;
padding: 8px 0;
position: absolute;
right: 0;
z-index: 9999;
}
.logo_img img {
width: 124%;
}
.border_img img {
width: 105%;
}
.form_title h2 {
color: #0068ea;
font-weight: 400;
font-size: 30px;
line-height: 45px;
}
.disclaimer p {
font-size: 10px;
line-height: 15px;
}
}
/* Custom, iPhone Retina */
@media (min-width: 320px) and (max-width: 478px) {
.slide-body {
flex: 1;
}
.upload-filename {
max-width: 120px
}
.slide-image-wrapper {
display: none;
}
}
/* additions after fiverr */
@media (min-width: 768px) {
.slide .container {
border-radius: 1rem;
-webkit-box-shadow: 0px 0px 20px -3px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 0px 20px -3px rgba(50, 50, 50, 0.5);
box-shadow: 0px 0px 20px -3px rgba(50, 50, 50, 0.5);
}
.slide-image-wrapper {
margin-right: -15px;
}
}