Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 17
  • Views 4.9k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
  • 9 months later...
  • Solution
On 11/26/2021 at 8:36 AM, EllieWS said:

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/

He change title to this format (wrap second line in span tag)

Quote

Gigamon Hawk: <span>Art Direction / Brand Identity / Website / Banner Ads</span>

then add this to Design > Custom CSS

h3.portfolio-title span {
    display: block;
    font-size: 12px;
}

 

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
  • 1 year later...

@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

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

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
  • 2 months later...
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!image.thumb.png.34563208d3b221dc63785b3ece3dc08c.pngScreenshot2023-03-25at11_06_43AM.thumb.png.ba036f1e8b7cdc641cb683b4b75fc930.png

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

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
  • 8 months later...
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

 

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
  • 2 months later...

@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.

 

Screenshot 2024-01-31 at 14.26.55.png

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

 

Screenshot 2024-01-31 at 14.26.55.png

What is page url?

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
  • 1 month later...
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?

image.png.ae9124121a0b3da21b61e339b3e6d393.png

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.