I’m experiencing a major issue with the Salient portfolio module on https://lanestreet.ai/demos/:

• On desktop, the portfolio items correctly show overlay buttons/links (“Watch Video” and “More Details”) on hover.

• On mobile/responsive views, none of these links/buttons appear—not on tap, not in overlay, and not on the thumbnail or meta. As a result, there is no clear way for users to view the demo video (lightbox) or visit the portfolio detail page from a portfolio item.
• I have tried:
  • Every available Project Style and portfolio setting,
  • Multiple custom CSS/JS solutions,
  • Clearing cache and disabling third-party plugins,

but nothing has produced mobile-visible and clickable links.

Showcasing our demos is essential for client acquisition and brand growth. Without these links working on mobile, our most important portfolio assets are effectively hidden from over half our visitors—significantly impacting launch and revenue opportunities.

Even a solution enabling just one of the clickable links (either demo lightbox or details page) would be a major improvement, but ideally, both links/buttons would be accessible and obvious on mobile.  I've tried to add a single button overlaid on the thumb with custom CSS and make it link to the detail page and even that did not work. The button appeared but I cannot get a link to work.

Can you provide a fix or update, or guidance on how to enable portfolio item links/buttons on mobile?

Screenshots and a live URL are attached for your reference.

Thank you for your quick attention—this is the only blocker for our launch, and we're eager to continue building with Salient.

Hi - yes, this makes sense, thank you for confirming what I believed was the issue. 

And YES! I would love help to make the overlay text appear automatically using custom CSS. I tried this solution several times and it did not work. Are you able to provide that, and then confirm the optimal install location?

thank you again, I look forward to hearing back.

Hi, unfortunately this doesn't seem to be working. I've tried several times, cleared local cache, cleared server cache, restarted, etc. but there is still no link on the mobile portfolio image item. Is it possible to just make the preview image a single linkable image, and then I can recreate preview images with a 'play button' or 'arrow' overlay icon that indicates the preview image is linkable and I'll just send it to the detail page for each item?  

Hi  thank you for this. Well the new CSS turns the overlay color green on all portfolio preview images on mobile, and while it works as a single link when I shrink my desktop browser window down to simulate mobile viewport, there is no active link on the real mobile version on my iPhone 13 or another test on iPhone 15.  See attached screen.

Thx for any other ideas you might have... I'll try a few other things too. 

We are closer with a few other tweaks made to CSS -- so latest is below. it's working on mobile but requires 2 taps instead of 1 tap that just takes you to the item detail page.

The 1st tap seems to launch the gray overlay, the 2nd tap then takes you to the detail page. we just want the 2nd tap with no gray overlay or 1st tap - -it's not needed now that we have 'play' button graphic on the preview images -- so if I can just get rid of the gray overlay, it will work the way we're hoping.  

[We don't want the post loop builder since this is key parts of our site to showcase work and capabilities.] 

PS - I'm not a web dev or coder at all, so I appreciate the expert help on trying options - it's close!

see update here:
https://lanestreet.ai/demos/

current CSS being used:

 /* Remove hover effects */
}
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
  .portfolio-hover-bg-overlay,
  .portfolio-overlay,
  .your-overlay-class {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .portfolio-image:hover,
  .your-hover-class:hover {
    filter: none !important;
    opacity: 1 !important;
    background: none !important;
  }

UPDATE: Ok - I confirmed the Delay JS feature is currently *disabled. I cleared cache on local and server.

**Upon the first test, it was working correctly on iPhone -- no gray overlay and click worked to go to the portfolio item detail page. But then (after changing nothing else), the 2nd mobile test (also on iphone) was still showing the gray overlay and requiring 2 clicks on mobile to get to the detail page again. 

I did disable the cookie plugin and cleared server cache. 

Just attaching screenshot of latest test - see first portfolio image. is there somewhere else in the Salient code or settings we're missing where this is set? It really has a negative impact on the UX on mobile. 

here is current CSS as well, just in case this helps. thanks in advance for any additional ideas.

/* 1. Remove default browser spacing */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* 2. Remove only unwanted space above the header/logo */
body > .header, body > .header-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* 3. Prevent white bar from WP admin bar for logged-in users */
body.admin-bar .header, body.admin-bar .header-wrapper {
  margin-top: 32px !important; /* Default WP admin bar height */
}

/* 4. Restore and standardize spacing above main content rows/sections */
.site-content, .page-content, .content-area, .main-content {
  padding-top: 40px;
  box-sizing: border-box;
}

/* 5. Ensure VC/WPBakery rows have spacing (not stripped globally) */
.vc_row, .row, .container {
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
}

/* 6. If you use a fixed or transparent header, push content below it */
@media (min-width: 769px) {
  .vc_row:first-of-type, .main-content > .vc_row:first-child {
    padding-top: 80px;
  }
}

/* 7. Responsive logo and button styles */
@media (max-width: 768px) {
  #logo .mobile-only-logo {
    height: auto !important;
    width: auto !important;
    max-width: 100%;
  }
}

/* 9. Hide Salient portfolio heart/like icon */
.like-wrap, .nectar-love {
  display: none !important;
}

/* 10. Custom pricing table styles (unchanged) */
.ls-pricing-overview-wrap {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  background: #fff;
}
.ls-pricing-overview {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: #fff;
  color: #222;
}
.ls-pricing-overview th {
  background: #f8f9fa;
  font-weight: 600;
  padding: 18px 12px;
  text-align: left;
  border-bottom: 2px solid #e1e4e8;
  color: #2f2f2f;
  font-size: 1.05rem;
}
.ls-pricing-overview td {
  padding: 16px 12px;
  border-bottom: 1px solid #e1e4e8;
  vertical-align: top;
}
.ls-pricing-overview td ul {
  margin: 0 0 0 1rem;
  padding: 0;
  list-style-type: disc;
}
.ls-pricing-overview td ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.ls-pricing-overview tr:last-child td {
  border-bottom: none;
}
.ls-pricing-overview strong {
  color: #2a5ee4;
}
.ls-enterprise-button {
  display: inline-block;
  background: #2a5ee4;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
}
.ls-enterprise-button:hover {
  background: #1a4ec4;
}

/* Responsive adjustments for pricing table */
@media (max-width: 1024px) {
  .ls-pricing-overview-wrap {
    margin: 1rem 0;
  }
  .ls-pricing-overview th,
  .ls-pricing-overview td {
    padding: 12px 8px;
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  .ls-pricing-overview-wrap {
    box-shadow: none;
    border-radius: 0;
  }
  .ls-pricing-overview {
    min-width: 900px;
  }
}
/* For regular dropdown items */
body #header-outer #top nav .sf-menu ul li > a {
  font-size: 14px !important;
}

/* For description under mega menu items, if used */
.nectar-ext-menu-item span[class*="inherit-h"] + .menu-item-desc {
  font-size: 14px !important;
}

  /* Remove hover effects */
}
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
  .portfolio-hover-bg-overlay,
  .portfolio-overlay,
  .your-overlay-class {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .portfolio-image:hover,
  .your-hover-class:hover {
    filter: none !important;
    opacity: 1 !important;
    background: none !important;
  }
}

body, html {
  font-family: 'Poppins', 'Verdana', 'Arial', 'Helvetica Neue', Helvetica, sans-serif !important;
}

.logo {
  display: block;
  max-width: 180px;       /* Adjust as needed for desktop */
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .logo {
    max-width: 130px;     /* Adjust for mobile */
  }
}
@media (max-width: 767px) {
  /* Hide overlay backgrounds and pseudo-elements on portfolio items */
  .portfolio-hover-bg-overlay,
  .portfolio-overlay,
  .your-overlay-class,
  .portfolio-item::before,
  .portfolio-item::after,
  .portfolio-image::before,
  .portfolio-image::after {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: none !important;
    content: none !important;
  }

  /* Also make sure portfolio images and links are clickable on mobile */
  .portfolio-item a {
    pointer-events: auto !important;
  }
}