Problems with Astro Components

Question

I have a component in Astro like:

---
import features from "../config/features.json";
import FeaturesTemplate from "./FeaturesTemplate.astro";

---

<div class="mb-36 features-container">
    {
        features.map((feature) => (
            <FeaturesTemplate>
                <div class="flex-1 text-center">
                    <h2>{feature.title}</h2>
                    <p>{feature.description}</p>
                </div>
                <div class="flex-1" slot={feature.slot}>
                    <img src={feature.img} alt="Feature Image" />
                </div>
            </FeaturesTemplate>
        ))
    }
</div>

<style lang="scss">
    .features-container {
        margin: auto;
        margin-top: 10rem;
        padding: 1rem;
        width: 1100px;
        max-width: calc(100% - 2rem);
    }
</style>

where 'features' comes from a JSON data like:

[
    {
        "title": "Aplicación para todos los dispositivos",
        "description": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. ",
        "img": "img/mockup1.png",
        "slot": "before"
    },
    {
        "title": "Con un enfoque en la rapidez del cliente",
        "description": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. ",
        "img": "img/mockup2.png",
        "slot": "after"
    },
    {
        "title": "Y en la gestión eficiente del administrador",
        "description": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. ",
        "img": "img/mockup3.png",
        "slot": "before"
    }
]

FeaturesTemplate component is like:

<div
    class="flex flex-col md:flex-row gap-8 items-center justify-between mb-36 text-center md:text-left"
>
    <slot name="before" />
    <slot />
    <slot name="after" />
</div>

In order to allow to put images before or after slot.

However, I want this behavior whenever we are on a PC, but in the case of a mobile screen, I would like to position all the images in slot 'before'.

Can someone help me solve this? Thank you in advance.

Answer 1

You need to know how Slots works

So basically Slots in Astro put elements after it when using the component as a Parent https://docs.astro.build/en/core-concepts/astro-components/#named-slots

For the basic solution, this can be done using CSS, and yeah you can make that programmatically based on the device opening the webpage

so the solution using CSS would be to reverse the flex

.features-container {
        ...
display:flex;
flex-direction: column;
    }
    @media and screen (max-width: 599px){
.features-container {
        ...
display:flex;
flex-direction: column-reverse;
    }
}

This will make the output like slot slot #before

if you want to do that programmatically you have to use JS

following that snippet

const isMobile = navigator.userAgentData.mobile; //resolves true/false

Compatibility chart for userAgentData