'Make all components fit in one page in Svelte

Hello !

I need help about some css. (I think)

I have a svelte project where I need just to display 7 "block" which all fit in one page.

The actual code is this for the App.svelte :

<script>
    import Podcast from "./components/Podcast.svelte";
</script>

<style>

    body
    {
        width: auto;
        height: 100%;
    }

</style>
<body>
    <Podcast color={"red"} title={"red"}/>
    <Podcast color={"green"} title={"green"}/>
    <Podcast color={"blue"} title={"blue"}/>
    <Podcast color={"purple"} title={"purple"}/>
    <Podcast color={"yellow"} title={"yellow"}/>
    <Podcast color={"brown"} title={"brown"}/>
    <Podcast color={"orange"} title={"orange"}/>
</body>

and this for the component :

<script>
    export let title;
    export let color;
</script>

<style>
    body
    {
        width: auto; 
        height: 9em;
    }

    .title
    {
        display: flex;
    }
    
    .centerTitle
    {
        display: flex;
        justify-content: center;
        justify-items: center;
    }

</style>

<body style="background-color: {color}">
    <div class="title">
        <div class="centerTitle">
            The title is : <b>{title}</b>
        </div>
    </div>
</body>

This is the result

there is still a white border at bottom !

and btw if you know how i could center vertically / horizontally the text i would be glad to know too !

htmlcssflexboxsvelte


Solution 1:[1]

Avoid creating body tags inside the svelte component. Your svelte app mounts to the body of the index.html of your project. Also, if you take a look at the default global.css you will find the body to have padding you can remove it.

I have a REPL you can check it out this can help you, I have used display:grid but also included a flex example

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shriji Kondan

Related Questions