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 />
<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>
<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!
No description
34 Replies
Zoë
Zoë14mo ago
Could we have a CodePen https://pen.new/ so we can have a look at what's going on First 2 things that come to mind is that there is a height 0 or using grid and they're in the same cell, both of which I feel would be noticeable and so unlikely. It's just had to know without being able to inspect it
CodePen
...
elbi3
elbi314mo ago
I'm not sure how to replicate sveltekit components in a codepen, but if you have an example I can refer to I will try?
Zoë
Zoë14mo ago
Inspect HTML, then just copy the HTML on the page and then copy over the SCSS
elbi3
elbi314mo ago
my scss is about 20 files
Zoë
Zoë14mo ago
Just stick it all in, I'm not going to be looking at it, just inspecting the elements
b1mind
b1mind14mo ago
SvelteLab
SvelteLab
A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.
Zoë
Zoë14mo ago
Is there a spelling error?
We can’t connect to the server at sveltelab.com.
Edit: gotcha
b1mind
b1mind14mo ago
You can also use Stack blitz directly to share Sveltekit Or if it's just minimal use the Svelte repl
elbi3
elbi314mo ago
thank you I'll try to get one of these up or worst case spin up a vanilla vite app and see if it's just the SCSS (shouldn't be because I've used *my template a few times at this point 🥲 )
b1mind
b1mind14mo ago
When you say markdown you mean html? Markup? Cause yes it looks like a CSS issue to me. Got some fixed or position issues, something pulling from the flow.
elbi3
elbi314mo ago
sorry mean to say markup yea I agree, I'll try to get it all up that or I really don't understand Svelte components, it was stacking anything I had in +layout.svelte file's main tag over the slot content (whatever I had in my root +page.svelte file) but I'll try to get it all up because I agree it's frustrating when people don't post all their code when asking for help sorry this is taking me so long to setup 😭 is it rude if I just link my github? I've got most of the code copied to this stackblitz, but I'm still trying to do all the installs so my package.json is the same
b1mind
b1mind14mo ago
GitHub repo is better than guessing sure
elbi3
elbi314mo ago
GitHub
GitHub - Rental-Reviews-Site/User-Interface
Contribute to Rental-Reviews-Site/User-Interface development by creating an account on GitHub.
elbi3
elbi314mo ago
(if I could ask for feedback, in the future how can I can ask this question better?)
Zoë
Zoë14mo ago
We just need to be able to access it to know what the issue is, as there can be many different options and we'd just be guessing
elbi3
elbi314mo ago
oh one second I need to push my branch. I'm really sorry, I'm super stressed out so I keep making mistakes
Zoë
Zoë14mo ago
It's cool
elbi3
elbi314mo ago
it's feature/userflow-1-setup that has the visual issue I showed in my initial question and if it's difficult to view I don't mind merging it with main I haven't done any serious logic in Svelte yet and all my design files are easily reconstructed
b1mind
b1mind14mo ago
Give me a few to get back to my PC. I'm pretty sure it's a css issues but let's look!
b1mind
b1mind14mo ago
My mentor does lots of great Svelte content these days.
Zoë
Zoë14mo ago
You have line-height: 0 on body, main, .general
elbi3
elbi314mo ago
should it be 1?
Zoë
Zoë14mo ago
I'd remove it if you don't need it, it defaults to 1.15
elbi3
elbi314mo ago
I think I confused it with letter spacing 😭 let me see if that fixes it
Zoë
Zoë14mo ago
Ohh I still wouldn't use letter-spacing: 0. It doesn't affect most people (defaults to 0), but does affect people who for accessibility reasons want the letter spacing to be greater
elbi3
elbi314mo ago
this wasn't going to be my final styling, I was just trying to port in the things I planned to use and set them to be unopinionated until I finished my hifi design but I will put a note in my template for the future so I default to something accessible ty
Zoë
Zoë14mo ago
😊
elbi3
elbi314mo ago
that fixed it! ahhhh what a dumb mistake! thanks @z- ::theProblemSolver::
Zoë
Zoë14mo ago
It's always worth going into inspector and just unchecking each style individually if what is happening goes against default styles. You may have to go to parent elements
elbi3
elbi314mo ago
and here I was like "I guess I don't understand Svelte components" is that dev tools you are referring to?
Zoë
Zoë14mo ago
Yes, specifically the inspector in dev tools
elbi3
elbi314mo ago
ok I see what you mean I'll try that next time thanks so much I really appreciate the help, I couldn't sleep because this problem was bugging me so much alright I'm going to go play some videogames I'll take a look for sure
Want results from more Discord servers?
Add your server