Portfolio page v7.1: how to display project names on mobile

Site URL: https://poodle-turtle-zkzb.squarespace.com/portfolio-tiled

Hello!

I'm on 7.1 working with Portfolios, specifically the main portfolio page that shows all projects.

I'm looking to display all project names on mobile, when a user goes to my main portfolio page and they see all my projects as thumbnail tiles. 

Portfolio settings:

• Format tab
  • Grid: Overlay
  • Show Text: After Hover

https://poodle-turtle-zkzb.squarespace.com/portfolio-tiled

On desktop, project names display as expected upon hover. 

On mobile, project names do not display at all.  

--- I'm looking for an option, or code, that will display the project name over the project image tile on mobile. Preferably at bottom with some opacity.

(I know that I can work around this by choosing Show Text: Before Hover.)

Support told me that this option isn't available other than to add custom code. 

thanks to anyone who can help!

Have you found the solution yet?

hello @tuanphan  I haven't found anything yet! Any suggestions for where I can learn this or any resources? 

@JohnEuling if i understand correctly I think you will find the answer you want here: 

thank you @csailes ! I appreciate it. I'll experiment with it. @tuanphan

If you haven't solved it yet, you can share portfolio, we can check easier.

Above link is private.

hello @tuanphan Thanks so much.

-- I finally tried your code injection for the mobile hover option, but it's not working for me when I use Safari on my iPhone. Does the below page do you see the gallery text on mobile?

You can see the page here (and I attached the injection screen)

https://poodle-turtle-zkzb.squarespace.com/portfolio

I injected: 

@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1 !important;
}
}

-- also, when the page loads, I can sometimes see a flash or flicker of the code at the top of the page, not sure why! 

14 minutes ago, JohnEuling said:

also, when the page loads, I can sometimes see a flash or flicker of the code at the top of the page, not sure why! 

When adding CSS to any of the pages as opposed to Design > Custom CSS it needs to be wrapped in a style tag. Like so...

<style>
  
  @media screen and ( max-width:640px ) {
  
	.portfolio-text {
    
      opacity: 1 !important;
      
	  }
    }
    
  </style>

After you do this check if your are still having your other issue and let us know.

@creedon hey thanks so much! I didn't know that. I really appreciate your time and help.