Jump to content

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 comment
  • Replies 8
  • Views 1.9k
  • Created
  • Last Reply
  • 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 comment
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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.