Show project title on mobile only

Hi,

First of all, thanks for the theme, I love it.

I’d like to always display project titles on the tiles for mobile devices, and keep them shown only on hover for desktop, since you can’t get hover on touch devices. Any help with the CSS code needed to show it would be appreciated.

I already have this in my child theme, so I presume I would add a display show or opacity setting, but I don’t know on which element.

@media only screen and (max-width:1024px) {
}

Thank you very much.

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 1024px) {
    .roll-project .project-item .project-title-wrap {
        opacity: 1 !important;
        background-color: rgba(0, 0, 0, 0.2);
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Perfect, thank you very much.

One issue: Any ideas why it doesn’t work if I place the code in the style.css of the child theme, and it only works if I place it under Customize - Additional CSS?

Thanks again.

Nevermind, caching issues on Safari.

Thanks again.

You are welcome! :slight_smile:

Kind Regards, Roman.