Jump to content

Grid Overlay on Mobile: CSS results different iPad vs iPhone

Recommended Posts

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?


@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
Link to comment
  • Replies 2
  • Views 886
  • Created
  • Last Reply

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.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.