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
Edited by sneather
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.