*, *::before, *::after{ box-sizing: border-box; } .create-display{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .create-part{ display: flex; height: 100vh; width: 100%; padding: 29px 40px; flex-direction: column; align-items: center; gap: 10px; border-right: 4px solid var(--Rotkehlchen-gray-hover); border-left: 4px solid var(--Rotkehlchen-gray-hover); background: #FFF; } .create-layout{ display: grid; grid-template-columns: auto auto auto; } .create-account{ display: flex; flex-direction: row; align-items: center; } .create-post1{ display: flex; flex-direction: column; gap: 9px; width: 90vw; } .create-post-description{ width: 100%; accent-color: var(--Rotkehlchen-yellow-default); } .create-post2{ display: flex; flex-direction: column; width: 100%; gap: 10px; align-items: flex-start; } .create-tags{ width: 90vw; } .create-post-image{ height: 40vh; width: 90vw; object-fit: cover; overflow: hidden; } input#create-file-upload[type="file"] { display: none; } .create-file-upload { border: 1px solid #ccc; padding: 6px 12px; cursor: pointer; width: 90vw; height: 100px; } .create-post3{ display: flex; flex-direction: row-reverse; width: 100%; align-items: flex-end; } @media only screen and (min-width: 768px) { .create-display{ padding-top: calc(var(--Header-height) + 1rem); padding-bottom: 1rem; } .create-part{ width: 90vw; height: calc(100vh - var(--Header-height)); } .create-post1{ width:70vw; flex-direction: row; } .create-post2{ display: flex; flex-direction: row; width: 70vw; gap: 10px; align-items: center; } .create-post-image { width: 100%; max-width: 600px; display: block; margin: 0 auto; } .create-file-upload { border: 1px solid #ccc; padding: 6px 12px; cursor: pointer; width: 300px; height: 100px; } .create-tags{ width: 100%; } }