Grid Overlay on Mobile: CSS results different iPad vs iPhone

I've applied the CSS below (I believe by tuanphan) to my site, to force the (desktop) hover text to always show on mobile.

However, while it seems to do as indicated, on my iPhone. When I view the same test site on my iPad, it fails to show the hover text. I'm entirely new to any form of CSS, so I don't know this from that. What might I be doing wrong?

Thanks!

@media screen and (max-width: 640px) {
    .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text,.tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text {
        opacity:1 !important
    }

    .portfolio-overlay {
        opacity: .35 !important
    }
}

Quick update...

I messed around with the "max-width" by changing it to 1024px. That enabled the forced text appearance on my iPad Pro - in vertical (portrait) orientation. The moment I rotated the device horizontal, the text disappeared - presumably because the pixels exceeded the max.

Is there a better solution than just CSS for pixel width? Obviously, if I increase that max width too far, then I'll invariably trigger that always-on text for visitors' desktop / laptop monitors, which I DON'T want.

to target landscape, use this

@media screen and (max-width:1024px) and (orientation:landscape) {CSS}