Code not working on mobile. Code is working on desktop and mobile preview.

[swellsport]

Looking for some coding help. On the desktop view, im looking to just have the collection name showing in the middle image, not showing in image 1 and 3 as it is currently.

With mobile, the preview currently shows it in the middle of all 3 images that are in a swipe. This is perfect and what i am looking to design, although when loading the mobile site on my mobile, the collection names are in the default location below the images. Any help appreciated.

This is the code currently.

.collection-list .card > .card__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
border: 0px solid red;
width: max-content;
padding: 0 1rem;
}

.collection-list h3.card__heading {
color: gray;
}

.collection-list .card__heading > a > span.icon-wrap {
display: none;
}

[Dev-Brad]

Hey @swellsport 

Would love to help out further, did you have a link to the preview theme or site so i can inspect a little further for you? 

[swellsport]

Hi Brad, This is the spotlight theme. 

the url is

swellsport.com.au

Password 

Swell101

[swellsport]

@Dev-Brad 

[Dev-Brad]

Hey @swellsport 

I took a further look and it looks like a bit of CSS will need to be moved around to make sure that on desktop, only the second tile shows the "chasing the swell" Text and link, and then on mobile it still shows in the middle of the image for all of them instead of below

Ideally we would add a few extra inputs into the theme customiser so you can keep the functionality for both options  and not risk creating bugs in the section making it unusable or buggy for customers 

I've sent you a message through the contact form, hopefully I can help out further maybe over a call or something