Jump to content

Changing portfolio grid overlay font and size for 2 lines

Recommended Posts

  • Replies 19
  • Created
  • Last Reply

Top Posters In This Topic

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.c2576257a7a233ca259d0d55e13838af.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

The code I gave above is applied for only this gallery

image.thumb.png.2cc9c7e4c41d89d48c0d3f8db52b4c81.png

Do you need on another gallery?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
4 minutes ago, Emmapartridge said:

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

image.thumb.png.83450f3bb9d6ffaf7227b380831276db.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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