1 2 3 4@media screen and (max-width: 1000px) { 5 .container, .header { width: 90% !important; } 6 .left, .right { width: 20%; } 7 .middle { width: 55% } 8 .headerpadding { margin-left: 1em; } 9} 10 11@media screen and (max-width: 800px) { 12 .container, .header, .left, .middle, .right, .headerpadding { width: 97% !important; } 13 .container { overflow: unset; } 14 .middle { margin: 1em 0px !important; } 15 /*.sidebox { margin-bottom: 0px; }*/ 16 .footer { width: 90%; } 17 .headerpadding { margin-left: 1em; } 18 .container { top: 0px !important; } 19 .headercontainer { position: unset !important; } 20 .middle li, .middle dd { margin: 1.35em 1.15em; } 21 22 /* rearrange elements * / 23 /* 24 https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079 25 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns 26 https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit 27 */ 28 .container, .allboxessameheight { 29 display: grid !important; 30 grid-template-columns: repeat(1); 31 } 32 .right { order: 3; float: none !important; } 33 .left { order: 2; float: none !important; } 34 /* /////_______//// */ 35} 36 37/* media manager and config manager for mobile */ 38@media screen and (max-width: 480px){ 39 fieldset, 40 #mediamanager__page, 41 #mediamanager__page .filelist{ 42 max-width: 100%; min-width: unset; 43 } 44 #mediamanager__page .file, 45 #mediamanager__page .namespaces, 46 #mediamanager__page .panel { 47 width: 100%; clear: both; float: none; 48 } 49 /*.page li, .page dd { margin: 1.35em 0px !important; }*/ 50 #config__manager fieldset { background-color: transparent; } 51 #config__manager tr { } 52 #config__manager td { display: block; padding: 1.15em 0px; max-width: 50%; } 53 54 #config__manager fieldset { width: 100%; box-sizing: border-box; } 55 56 #config__manager fieldset td.value { width: unset; } 57 58 /* make <select> not exceed it's parent div's width */ 59 /* https://stackoverflow.com/q/44810056/337306 */ 60 div.input { display: flex; } select { width: 100%; flex-shrink: 1; } 61 62 #config__manager td .input, 63 #config__manager fieldset td.value, 64 #config__manager td input.edit { 65 max-width: 100%; 66 width: unset; 67 } 68}