Jump to content

Adding subtitle to Portfolio Grid Thumbs

Recommended Posts

On 1/26/2022 at 11:03 PM, hanamorrison said:

Is there a way to do this without using the Code Injection feature? It is a premium paid feature. I am trying to solve the same problem of <br/> not working for me. Here is my website: https://www.hanamorrison.com/work

Yes. Will need to use CSS to add subtitle. The url doesn't exist. Can you check it again?

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
On 1/27/2022 at 6:14 AM, Adeline said:

Amazing! This worked well! Thank you so much @tuanphan

Just one more quick question, how can I change the text size of the third and fourth lines (hospitality & short description ...)? I have tried the attached, and it didn't seem to work. Thank you!

https://tuatara-spinach-tplz.squarespace.com/all
PW: 1234

1119673580_ScreenShot2022-01-27at10_11_33am.png.a02e77f63fa88cd269450f4cb90013b3.png1110646636_ScreenShot2022-01-27at10_12_55am.png.8a04a7d68ca453d08978026ece34298f.png

Hi. Not possible. Can't target third * fourth lines :(

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
On 1/18/2022 at 1:00 AM, Nico_Burrito said:

hello @tuanphan

When you open a project, and scroll to the bottom of the page, you have the titles of the previous and next project, these don't take your formatting into account, and appear as 1 big text block. is there any way to edit how these look?

you can see here:
https://shallot-flatworm-fyc8.squarespace.com/work/slate-studios-nyc

pw: nico

Screen Shot 2022-01-17 at 9.49.26 AM.png

Add to Design > Custom CSS

/* Portfolio Pagination title */
.item-pagination[data-collection-type^="portfolio"] h2.item-pagination-title {
    display: none;
}
.item-pagination[data-collection-type^="portfolio"] .item-pagination-prev-next {
    display: block !important;
}

 

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

Web: https://www.loisartz.com/

Hi all,
I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

I have used span to separate title and subtitle of the project.

image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

This is the code:

CODE INJECTION

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $("h3.portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

CSS

h3.portfolio-title span {
    display: block;
    font-size: 21px;
  font-weight: 10 !important;
  margin-top:-6px
    
}
h3.portfolio-title {
    font-size: 33px !important;
    font-weight: medium !important;
    color: white !important;
}

 

And it should always come out like this

image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

How can I solve it?

Thanks a lot ♥♥

Edited by loisartz
Link to comment
6 hours ago, loisartz said:

Web: https://www.loisartz.com/

Hi all,
I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

I have used span to separate title and subtitle of the project.

image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

This is the code:

CODE INJECTION

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $("h3.portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

CSS

h3.portfolio-title span {
    display: block;
    font-size: 21px;
  font-weight: 10 !important;
  margin-top:-6px
    
}
h3.portfolio-title {
    font-size: 33px !important;
    font-weight: medium !important;
    color: white !important;
}

 

And it should always come out like this

image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

How can I solve it?

Thanks a lot ♥♥

It looks fine here. Did you solve?

image.thumb.png.cb3b09ceecd30e050ff4db623f06da3a.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
  • 2 months later...
On 4/14/2022 at 8:52 AM, Nico_Burrito said:

hi @tuanphan would you know how to do that?

Add to Design > Custom CSS

/* Pagination title */
@media screen and (max-width:767px) {
h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}
}

If you want to it run on all devices, change 767 to 9999

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
  • 11 months later...
On 3/27/2023 at 10:47 PM, poznerol said:

Hi, I have the same problem. Would like to add subtitles and maybe customize the font size and appearance of my projects (the three papers in my home). How can I do that?
https://www.lorenzoposani.com/
 

See #2

 

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

Hi all,
I have a problem, I have added the code you suggested:

Caption:
<h2 class='thumb-caption'>I'm a Caption</h2> <p class='thumb-desc'>I'm a Description</p>


CSS:

h3.portfolio-title span {
    display: block;
    font-size: 21px;
  font-weight: 10 !important;
  margin-top:-6px
    
}
h3.portfolio-title {
    font-size: 33px !important;
    font-weight: medium !important;
    color: white !important;
}


the subtitle was successfully added, but I'm still struggling to change the font and style of the titles and subtitles. Any idea why?

Also, I want to reduce the padding between the title and sub-title, Do you know how to do that?

Thanks!
 

shark-cymbals-z6bt.squarespace.com
PW: 1234

Screenshot 2023-08-25 at 14.42.52.png

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.