CSS not working on IOS

[rogerjet]

Hi

I have added some custom css to my base.css file to change the look of my collection list on the homepage.

I am using the current dawn theme 13.0.1 website is swaace.com.au

This is the outcome I want;

But on IOS the css seems to get ignored and it get the following;

Here is the code i have added.

/* added to move text to centre of collection list image */
.collection-list-wrapper .card__content {
    position: absolute;
    justify-content: flex-start;
    left: 5%;
    height: 100%;
    align-items: center;
    }
.collection-list-wrapper .card.card--standard.card--media {
    position: relative;
    overflow: hidden;
    }
.collection-list-wrapper h3.card__heading span.icon-wrap {
    display: none;
    }
.collection-list-wrapper h3.card__heading a {
    /*color: white;  use this to change color of the text*/
    font-size: 20px;  
    font-weight: bold;
    }

thanks for any ideas.

[AnneLuo · Accepted solution]

Hello, @rogerjet 

The code you added is not in the correct location.

Please remove your code from @ media (preferences reduced motion: no reference) and (hover: hover). Then place it outside.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!