1 2@media screen and (max-width: 1000px) { 3 #header, #page, #menu { width: 100% !important; } 4 #content { width: 70%; } 5 #sidebarelement { width: 30%; box-sizing: border-box; } 6 #search-text { width: 60%; } 7} 8 9@media screen and (max-width: 700px) { 10 #wrapper, #page, #menu-wrapper { overflow: unset !important; } 11 #sidebarelement { float: left; clear: both; width: 90%; } 12 #header, #page, #content, #menu { width: 100% !important; } 13 #menu { min-height: 55px !important; height: auto !important; } 14 #logo h1 { font-size: 8em; } 15 .post .meta { margin-top: 45px; } 16 #header { margin-top: 2em; } 17} 18 19/*edits for dokuwiki */ 20@media screen and (max-width: 700px) { 21 .page li, .page dd { margin: 0.85em 0px 0px 0px; } 22 button { margin: 8px; } 23 button img { padding: 3px; } 24} 25 26/* media manager and config manager for mobile */ 27@media screen and (max-width: 480px){ 28 fieldset, 29 #mediamanager__page, 30 #mediamanager__page .filelist{ 31 max-width: 100%; min-width: unset; 32 } 33 #mediamanager__page .file, 34 #mediamanager__page .namespaces, 35 #mediamanager__page .panel { 36 width: 100%; clear: both; float: none; 37 } 38 /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/ 39 #config__manager tr { } 40 #config__manager td { display: block; padding: 1.15em 0px; max-width: 75%; } 41 42 .dokuwiki fieldset { width: unset; } 43 #config__manager fieldset { width: 100%; box-sizing: border-box; } 44 45 /* make <select> not exceed it's parent div's width */ 46 /* https://stackoverflow.com/q/44810056/337306 */ 47 div.input { display: flex; } select { width: 100%; flex-shrink: 1; } 48 49 #config__manager fieldset td.value { width: unset; } 50 51 #config__manager td .input, 52 #config__manager fieldset td.value, 53 #config__manager td input.edit { 54 max-width: 100%; 55 width: unset; 56 } 57}