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 9
  • 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.