Changing portfolio grid overlay font and size for 2 lines

16 hours ago, Emmapartridge said:

 

Site URL: http://bjornsorensen.com

Wizards please help 🙂

I've tried numerous code and have given up! See the portfolio section.

 

I want the overlay text as 2 separate lines. First line with bold weight 30px and second line with regular weight 20px. I also want a black overlay? How can I do this please?

Try adding to Home > Design > Custom Css

section[data-section-id="607295ad0d6e7a606f92f585"] .portfolio-grid-overlay .portfolio-title:first-line {
  font-weight: bold;
  font-size: 30px;
}
section[data-section-id="607295ad0d6e7a606f92f585"] .portfolio-grid-overlay .portfolio-title {
  font-weight: 300;
  font-size: 20px;
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

7 hours ago, Beyondspace said:

section[data-section-id="607295ad0d6e7a606f92f585"] .portfolio-grid-overlay .portfolio-title:first-line {
  font-weight: bold;
  font-size: 30px;
}
section[data-section-id="607295ad0d6e7a606f92f585"] .portfolio-grid-overlay .portfolio-title {
  font-weight: 300;
  font-size: 20px;
}

Hi 

Thank you but adding this code made no difference.

2 hours ago, Emmapartridge said:

Hi 

Thank you but adding this code made no difference.

Can you show some screenshot where you put my code?

Here you go, thanks

The code I gave above is applied for only this gallery

Do you need on another gallery?

Hi, I want all portfolio images to be on two lines just like the example you have attached. The code isn't working for any portfolio nugget?

Not sure what you mean by gallery, it's a portfolio section.

Thanks

Do I need to add the title of the text within the code? I'm obviously adding it incorrectly. Thanks

I can not see the my code on your site. I wonder if you remove it or not. You can try the following code to apply for all portfolios

.portfolio-grid-overlay .portfolio-title:first-line {
  font-weight: bold;
  font-size: 30px;
}
.portfolio-grid-overlay .portfolio-title {
  font-weight: 300;
  font-size: 20px;
}

Hi it's defiantly there in the CSS, I have removed the password so you can take a better look. Thank you really appreciate you on this 

https://www.emmapartridge.co.uk/projects

4 minutes ago, Emmapartridge said:

https://www.emmapartridge.co.uk/projects

I can only see the title on just one line. Do I miss anything?

Hello, yes that is my request please. I want the title on two lines, all titles on two lines

I have found this online, a HTML injection - also doesn't work

<!--- Wrap gallery titles on two lines -------------------------->
<!--- Copyright Soundfocus Digital [sf.digital] ----------------->
<!--- Use freely in your code injection. Do NOT re-publish ------>
<script>
window.Squarespace.onInitialize(Y, () => {
  var title = document.querySelectorAll('.image-slide-title');
  for (var sf = 0; sf < title.length; ++sf) {
    var item = title[sf]; 
    item.innerHTML = item.innerText.replace(/#/g, '<br>');
  }
});  
</script>

I don't understand why this also doesn't help

https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles

this looks like it might work but I need to know what goes in the Divs?

Name of the project <span>Logotyp</span>

.portfolio-text h3 span {
    display: block !important;
    color: #8f8f8f;
  font-family: Poppins !important;
    font-size: 18px !important;
    font-weight: 100 !important;
}

Hello, are you still able to help?

On 11/22/2022 at 12:51 AM, Emmapartridge said:

Hello, are you still able to help?

 

Try #2 code