How can I add two lines of text to the Portfolio Grid overlay?

Site URL: https://giraffe-fife-xnsh.squarespace.com/work

Hi there,

I am trying to create two lines of text hover overlay on the portfolio grid but cannot seem to differentiate. I have tried using the coding suggested and editing the section id but nothing is working.

Would love some assistance!

Hi. What is access password?

Using the description box add a <span> and then use CSS to style the span.

Title <span> about</span> with CSS will look like "

Title

About

Hi, I have the same problem! I went to the site URL and it looks like you've solved your issue. Could you share the CSS so that I can do the same for my website? I have a title and a description that I want on the next line. Just like yours, I have multiple image blocks and each one has a title and description. Thank you.

Site URL: https://www.elliewinter.com/

@tuanphan I've successfully implemented your code to get two lines of text on my new website's portfolio page thumbnails, see here: https://www.foranconcepts.com/branding

(Thank you!)

However, then when you click on any one of those project's, the page title in the browser tab shows the full text without a break. Is it possible to control the actual page titles in this instance? Example here (if on desktop, hover over the tab in your web browser): https://www.foranconcepts.com/branding/mpf

On 1/5/2023 at 4:29 AM, broadcreatives said:

@tuanphan I've successfully implemented your code to get two lines of text on my new website's portfolio page thumbnails, see here: https://www.foranconcepts.com/branding

(Thank you!)

However, then when you click on any one of those project's, the page title in the browser tab shows the full text without a break. Is it possible to control the actual page titles in this instance? Example here (if on desktop, hover over the tab in your web browser): https://www.foranconcepts.com/branding/mpf

Not possible. If you need, we can use new code to add second text and this text will appear on List page (/branding) only, it won't appear on portfolio detail page (/branding/mpf)

What do you think?

On 1/7/2023 at 9:41 AM, tuanphan said:

Not possible. If you need, we can use new code to add second text and this text will appear on List page (/branding) only, it won't appear on portfolio detail page (/branding/mpf)

What do you think?

@tuanphan That would be great. Appreciate the help!

Just following up on this, @tuanphan any idea how to remove the second line of text from the pagination at bottom of page? As you can see in second image, the <span> is included in the title in pagination... Thanks!

On 3/25/2023 at 9:08 PM, 5018 said:

Just following up on this, @tuanphan any idea how to remove the second line of text from the pagination at bottom of page? As you can see in second image, the <span> is included in the title in pagination... Thanks!

Can you share link to a page? We can check easier

Was there any solution to adding the second line to the portfolio title hover without it listing in the browser page title and pagination at the bottom? 

15 hours ago, dfesenmyer said:

Was there any solution to adding the second line to the portfolio title hover without it listing in the browser page title and pagination at the bottom? 

We can use CSS pseudo to do this. See #2 code

@tuanphan can you help with my problem?

I'm using a Portfolio page with numerous projects inside.  I have used the 'Assign Styles' to make the text large for the overlaying titles.  

However, because one project is titled 'Headshots' it is too long a word and SS wraps the word across two lines and it looks weird (see screenshot).

Is there code to adjust the font size for just a selected project title?

Or

Another way to make the text 'Headshots' not spill over like this.

On 2/2/2024 at 12:54 AM, garth85 said:

@tuanphan can you help with my problem?

I'm using a Portfolio page with numerous projects inside.  I have used the 'Assign Styles' to make the text large for the overlaying titles.  

However, because one project is titled 'Headshots' it is too long a word and SS wraps the word across two lines and it looks weird (see screenshot).

Is there code to adjust the font size for just a selected project title?

Or

Another way to make the text 'Headshots' not spill over like this.

 

What is page url?

@tuanphan the URL is https://plane-icosahedron-j26n.squarespace.com/

but the site is not published.  Can I show you without it being published?

On 2/7/2024 at 6:32 PM, garth85 said:

@tuanphan the URL is https://plane-icosahedron-j26n.squarespace.com/

but the site is not published.  Can I show you without it being published?

Follow this guide

@tuanphan Can you help me add an additional line below the title to the grid overlay portfolio as well? I just sent you a contributor invitation. The page is: https://koala-ellipse-smgx.squarespace.com/work

On 3/18/2024 at 1:07 PM, Charlie1 said:

@tuanphan Can you help me add an additional line below the title to the grid overlay portfolio as well? I just sent you a contributor invitation. The page is: https://koala-ellipse-smgx.squarespace.com/work

You mean add extra line under year?