Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
56 replies
elbi3

Slot content piling on top of other content?

I have been working on implementing an SCSS template in a SvelteKit project. My styles are coming through to the UI, however I am having trouble figuring out why some of the markdown is coming out piled up. I've tested and toggled so many things at this point, I'm not sure what to mention. If I remove all styling, the markdown paints to the browser the way you would expect: header, over main & slot content, over footer. My routing works fine, my route pages display their <h> tags, and while I've removed most styling at this point the root & body styles come through from the SCSS folder.
My root layout looks like this:

<script>
  import "$lib/main.scss";
</script>

<header class="site-header">
  <div class="site-header__inner">
    <div class="site-logo">
      <a href="/">LOGO</a>
    </div>
    <nav class="nav">
      <a href="/share">share</a>
      <a href="/contact">contact</a>
      <a href="/login">login</a>
    </nav>
  </div>
</header>
<slot />

and my root page.svelte looks like this:
<h1>Welcome to Rental Reviews</h1>
<nav>
  <a href="search">add review</a>
  <a href="see-reviews">see reviews</a>
  <a href="filter">browse</a>
</nav>
<h2>hey fellas,</h2>
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>

while I don't want to be stuck on a project, at this point I just need to know why this is happening because it's so weird!
Screen_Shot_2023-10-06_at_4.23.30_PM.png
Was this page helpful?