* { margin: 0; padding: 0; } .heading { padding: 20px 10px; text-align: center; } .claim-form { display: flex; flex-direction: column; align-items: center; width: 100% } .form { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 20px; width: 60%; } .table { display: flex; flex-direction: column; justify-content: flex-start; align-items: space-between; padding: 20px 10px; } .scrollarea { display: flex; flex-direction: column; justify-content: flex-start; overflow-y: scroll; } .tablerow { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; padding: 10px 5px; } .fieldscolumn { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; } .fieldsrow { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; padding: 5px 10px; } .submit { align-self: center; width: 30%; margin: 20px 10px; } .imageupload > input { display: none; } .fieldsrow > div { margin: 10px 20px; } .fieldscolumn > div { margin: 10px 20px; } .fieldscolumn > div > label { margin-right: 20px; } .money > input { width: 100px; } #addreceipt { height: 40px; } #total { display: flex; flex-direction: row; justify-content: flex-end; padding: 20px 10px; } #receiptslist { height: 20rem; } #info2 { justify-content: flex-end; } #textbox > textarea { align-self: flex-end; } #id_iban { width: 18rem; } .fieldscolumn > #textbox > textarea { height: 8rem; width: 18rem; } @media only screen and (max-width: 768px) { .heading { font-size: 18px; padding: 5px 5px; } h1.heading { visibility: hidden; height: 0px; } .table { padding: 5px 5px } #total { justify-content: center; } .fieldsrow { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; padding: 5px 5px } #receiptslist { width: 12rem; } } @media only screen and (max-height: 741px) { #receiptslist { height: 17rem; } } @media only screen and (max-height: 569px) { #receiptslist { height: 10rem; } }