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:
and my root page.svelte looks like this:
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!
34 Replies
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
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?
Inspect HTML, then just copy the HTML on the page and then copy over the SCSS
my scss is about 20 files
Just stick it all in, I'm not going to be looking at it, just inspecting the elements
SvelteLab
SvelteLab
A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.
Is there a spelling error?
We can’t connect to the server at sveltelab.com.Edit: gotcha
You can also use Stack blitz directly to share Sveltekit
Or if it's just minimal use the Svelte repl
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 🥲 )
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.
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
GitHub repo is better than guessing sure
GitHub
GitHub - Rental-Reviews-Site/User-Interface
Contribute to Rental-Reviews-Site/User-Interface development by creating an account on GitHub.
(if I could ask for feedback, in the future how can I can ask this question better?)
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
oh one second I need to push my branch. I'm really sorry, I'm super stressed out so I keep making mistakes
It's cool
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 reconstructedGive me a few to get back to my PC. I'm pretty sure it's a css issues but let's look!
SvelteKit
SvelteKit category.
My mentor does lots of great Svelte content these days.
You have
line-height: 0
on body, main, .general
should it be 1?
I'd remove it if you don't need it, it defaults to 1.15
I think I confused it with letter spacing 😭
let me see if that fixes it
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 greaterthis 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
😊
that fixed it!
ahhhh what a dumb mistake!
thanks @z- ::theProblemSolver::
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
and here I was like "I guess I don't understand Svelte components"
is that dev tools you are referring to?
Yes, specifically the inspector in dev tools
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