diff options
| author | Pinapelz <yukais@pinapelz.com> | 2025-02-14 00:27:33 -0800 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2025-02-14 00:27:33 -0800 |
| commit | 7b079bb9fdde3f2b8276a7100d3416405009c2be (patch) | |
| tree | d4acb3d4baece4884ca90fd69c919eadd12d3503 | |
| parent | b34ce8517026df992e52f0f27d9e589654efa52e (diff) | |
fix mobile scaling CSS issues
| -rw-r--r-- | index.js | 6 | ||||
| -rw-r--r-- | tiers.css | 85 | ||||
| -rw-r--r-- | tiers.html | 1 |
3 files changed, 89 insertions, 3 deletions
@@ -308,9 +308,9 @@ async function save_tierlist_with_template(filename) { try { // Fetch resources let [templateResponse, jsResponse, cssResponse] = await Promise.all([ - fetch('tiers'), - fetch('tiers.js'), - fetch('tiers.css') + fetch('/tiers.html'), + fetch('/tiers.js'), + fetch('/tiers.css') ]); let [templateHTML, scriptContent, styleContent] = await Promise.all([ @@ -201,3 +201,88 @@ img:hover { .row-buttons, .top-container, .images { display: none !important; } + +/* ...existing code... */ + +/* Add these media queries at the end of the file */ +@media screen and (max-width: 768px) { + .tierlist span { + min-width: 60px; + min-height: 60px; + font-size: 20px; + } + + .tierlist div.row { + height: auto; + min-height: 60px; + flex-direction: column; + } + + span.header { + width: 100%; + height: 40px; + } + + span.items { + padding: 5px; + min-height: 60px; + } + + img { + max-height: 60px; + } + + .button { + height: 60px; + width: 60px; + } + + .button img { + width: 40px; + } + + .buttons-container { + gap: 10px; + flex-wrap: wrap; + } + + .modal-content { + padding: 15px; + width: 95%; + } + + #modal-title, #modal-description { + width: 90%; + } + + #modal-description { + height: 20vh; + } + + .title { + font-size: 20px; + margin-bottom: 10px; + } +} + +/* For very small screens */ +@media screen and (max-width: 480px) { + .tierlist span { + min-width: 50px; + min-height: 50px; + font-size: 16px; + } + + .button { + height: 50px; + width: 50px; + } + + .button img { + width: 30px; + } + + img { + max-height: 50px; + } +}
\ No newline at end of file @@ -5,6 +5,7 @@ <title>Exported Tier List</title> <link rel="stylesheet" href="/tiers.css"> <script src="/tiers.js" defer></script> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="title"> |