Jump to content

Project Page Thumbnail Text Not Showing Up On Mobile

Recommended Posts

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!

Edited by SHendler
Link to comment
  • Replies 7
  • Views 478
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Edited by SHendler
Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.