Project Page Thumbnail Text Not Showing Up On Mobile

Site URL: https://StephenHendler.com

Hi!

On my site StephenHendler.com

Project Page Thumbnail text appears on Desktop as I'd like, but the text does not show up on Mobile.

When I'm coding on Desktop and switch to Mobile view, the text does seem to appear on hover. But the minute I get on an actual mobile device (my iPhone), it doesn't.

Any help with code? My goal is to have it appear on Mobile the same way on Desktop, where text appears on the hover.

Here is all the code I'm using so far:

.grid-item:hover .grid-image{
transform: scale(1.1);
transition: all 6s;}

.grid-item {
overflow: hidden !important;}

h3.portfolio-title span {
display: block;
font-size: 21px;
font-weight: 500;}

@media screen and (max-width:900px) {h3.portfolio-title span {
display: block;
font-size: 19px;
font-weight: 450;}}

Thank you!

@tuanphan any thoughts?

On 2/3/2022 at 10:45 PM, SHendler said:

@tuanphan any thoughts?

Add to Design > Custom CSS

/* Mobile Portfolio */
@media screen and (max-width:767px) {
.portfolio-text {
    opacity: 1 !important;
}
.portfolio-overlay {
    opacity: 0.75 !important;
}
}

Thanks @tuanphan  – this kind of worked, but now the text and the gradient show up before hover. I only want them to show up after hover (like desktop) when someone slightly touches the thumbnail. Any help?

On 2/8/2022 at 11:09 PM, SHendler said:

Thanks @tuanphan  – this kind of worked, but now the text and the gradient show up before hover. I only want them to show up after hover (like desktop) when someone slightly touches the thumbnail. Any help?

I Have no way to do this on mobile.

Hi @tuanphan check out this Project Page on Mobile:

http://andyhekimian.com/index

This is exactly how I'd like to do my Project Page on Mobile, but instead of a darker background on hover, I'd like it to mirror my desktop and be whiter. Any idea how can I achieve this?

For reference, this Project Page does it well on Mobile too: http://taliarapp.com/

Thanks for your help.

Try adding to Design > Custom CSS

.collection-type-index:not(.auto-color-index-item-bg) .index-item {
    background-color: rgba(255,255,255,0.5) !important; 
}

.index-item-title .index-item-title-link {
    color: black !important;
}

I think I just figured it out:

@media screen and (max-width:767px) {.portfolio-text:hover {
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 0.7);
  }}

@tuanphan how can I get this to work on iPads/Tablets?