Issue with width & styling

Hi there,

I have been trying to use as little manual CSS as possible for this project but I am having an issue with the positioning of items on screen. I want to have the arrows like in the below picture on the very far right on the screen on both mobile and web and I can do it by adding the following on the last column:

ion-text-end

Below is my code:

<IonContent fullscreen>
    <IonGrid fixed={true}>
        {error && <p>{error}</p>}
        {isPending && <p>Loading...</p>}
        {data && data.map((data: Sports) => (
            <IonList key={data.idSport}>
                <IonRow className={"ion-align-items-center"}>
                    <IonCol>
                        <IonThumbnail>
                            <IonImg src={handleSport(data.strSport)} />
                        </IonThumbnail>
                    </IonCol>
                    <IonCol>
                        <IonItem>
                            <IonText>
                                <h5>{data.strSport}</h5>
                            </IonText>
                        </IonItem>
                    </IonCol>
                    <IonCol>
                        <Link to={`/countries/${data.strSport}`}>
                            <IonIcon size={"large"} icon={arrowForwardCircleOutline}/>
                        </Link>
                    </IonCol>
                </IonRow>
            </IonList>
        ))}
    </IonGrid>
</IonContent>

The first screenshot is without the alignment of the text and as you can see theres a large amount of space to the right

As can be seen in the second screenshot I have added the ion-text-end to the column but the center text is off to the left

If anyone has any tips on the above it would be greatly appreciated!

Thanks

1 post - 1 participant

Read full topic