Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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!

Link to post
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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

Posted Images

  • 2 months later...

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! 

Screenshot 2020-12-08 133722.png

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...