diff --git a/index.html b/index.html index 8f92f0c..5ae17c9 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,9 @@ <div class="container flex flex-col items-center justify-center min-h-screen gap-4 p-4 mx-auto"> <div class="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack"> - <div class="flex flex-col items-center justify-center gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200" + <div class="flex flex-wrap items-center justify-around gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200" id="preview_sticker_pack"> - <img src="static/images/cinny.png" class="object-contain w-64" alt="" id="preview_sticker_pack_image" /> + <img src="static/images/cinny.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" /> <div class="flex flex-col justify-center gap-2"> <p class="text-4xl text-bold" id="preview_sticker_pack_name"> {sticker_pack_name} diff --git a/static/tailwind.css b/static/tailwind.css index 2df884f..c251f09 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -661,6 +661,10 @@ video { width: 6rem; } +.w-32 { + width: 8rem; +} + .max-w-\[90\%\] { max-width: 90%; } @@ -681,6 +685,14 @@ video { justify-content: center; } +.justify-between { + justify-content: space-between; +} + +.justify-around { + justify-content: space-around; +} + .gap-2 { gap: 0.5rem; } @@ -859,6 +871,10 @@ video { width: 5rem; } + .md\:w-64 { + width: 16rem; + } + .md\:max-w-\[768px\] { max-width: 768px; } @@ -867,6 +883,10 @@ video { flex-direction: row; } + .md\:items-center { + align-items: center; + } + .md\:whitespace-pre { white-space: pre; }