Issue
I have a problem that I'm almost sure is because of how I'm building my pages and not just a CSS issue. I am using Tailwind for my website. For my Sveltekit blog, I wanted the xyz.com/projects/some-project URL structure so I created a folder in routes called projects. Inside that I have two files, index.svelte and [project].svelte. Index should contain the listing of all posts and any project should be created at [project]. All this works fine, but the pages that are dynamically created have some weird layout issue that is causing it to not be responsive. For example, you can see how weirdly this page is formatted.
You can visit this page and see it for yourself. My code for this is here.
I read somewhere that I am supposed to use __layout.reset.svelte or something of that sort while creating dynamic routes? Is that what is wrong?
Why are my breakpoints and responsive CSS not working?
The reason I think its a Sveltekit issue is because the dynamic pages are the only pages where this is happening, so I'm assuming there is something wrong in how I've set it up.
Solution
Your /src/app.html's <head> section is where the problem is located. Yours is:
<head>
%svelte.head%
</head>
which is missing a critical piece, the <meta name="viewport" content="width=device-width, initial-scale=1" /> tag which is essential for mobile responsiveness.
This is normally present in default SvelteKit projects:
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
I noticed you started your project from a custom template, and indeed that template's /scr/app.html skeleton is missing the above info.
This is something you have to watch out for when using such templates - how they deviate from a standard install and what the impact is for you. My advice is, start from the default, and add pieces knowingly, with full understanding of the incremental changes and full control of your source.
Answered By - Thomas Hennes
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.