I just finished the desktop version of my website and now wanted to star working on mobile mode (bad practice, I know), but when I tried out mobile mode, both on dev and deployed, the screen width would be something above 900px according to the inspector, even though I selected a screen width of ~350px or so.
Even the highlighting of the inspector, when hovering over elements is down scaled, as if the screen really was 900px.
Tell me if you need more information or concrete code snippets.
I removed anything and just display an unstyled tag, but that didn't work, which is why I am guessing that this is either a problem deep within tailwind itself or sveltekit default styles or something, but I couldn't find anything.
Here is my tailwind.config.js:
/** @type {import('tailwindcss').Config} */export default { darkMode: ['class'], content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: { colors: { foreground: 'var(--foreground)', foreground_pale: 'var(--foreground_pale)', background: 'var(--background)', background_light: 'var(--background_light)', primary: 'var(--primary)', secondary: 'var(--secondary)', accent: 'var(--accent)', error: 'var(--error)' } }, fontFamily: { heading: ['Lexend Variable', 'sans-serif'], text: ['Epilogue Variable', 'sans-serif'], paragraph: ['Epilogue Variable', 'serif'], code: ['JetBrains Mono', 'monospace'] } }, plugins: [require('@tailwindcss/typography')]};And here is my app.css if it helps:
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Staatliches&display=swap');@import '@fontsource-variable/epilogue';@import '@fontsource-variable/lexend';@tailwind base;@tailwind components;@tailwind utilities;@layer base { :root { --foreground: #0d1016; --foreground_pale: #3d4036; --background: #d9dcef; --background_light: #eaeaff; --primary: #394c79; --secondary: #99a8cc; --accent: #5874b6; --error: #992020; } .dark { --foreground: #e9ecf2; --foreground_pale: #797c82; --background: #090c11; --background_light: #1f242f; --primary: #394c79; --secondary: #99a8cc; --accent: #5874b6; --error: #ff6060; } html { @apply h-full; } body { @apply bg-background; @apply h-full; @apply animate-[breathe_2s_ease-in-out_infinite]; @apply bg-gradient-to-t; @apply from-primary; @apply via-accent via-15%; @apply to-background; @apply to-80%; @apply bg-[length:100%_400%]; @apply custom-bg-animation; } .custom-bg-animation { animation: breathe 2.5s ease-in-out infinite alternate; } @keyframes breathe { 0% { background-position: 0 0; } 100% { background-position: 0 12.5%; } } h1, h2, h3, h4 { @apply font-heading; } h1 { @apply text-5xl; } h2 { @apply text-4xl; } h3 { @apply text-3xl; } h4 { @apply text-2xl; } p { @apply font-paragraph; } span, a, button { @apply font-text; } @keyframes bounce-right { 0%, 100% { transform: translateX(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateX(25%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .animate-bounce-right { animation: bounce-right 1s infinite; } @keyframes bounce-left { 0%, 100% { transform: translateX(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateX(-25%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .animate-bounce-left { animation: bounce-left 1s infinite; }}