Jump to content

Text not formatting correctly on Safari or mobile

Recommended Posts

Site URL: http://creativepartnersproductions.com/%C2%A0

I used the code provided here to create a second line of text under the Gallery Image caption:
https://forum.squarespace.com/topic/157514-gallery-grid-caption-format/

(the attached image is how it should look) 

 
My website:

When I do this, and test in Safari or mobile, at first the caption text does not display at all, and once the page is reloaded, it displays all in bold (instead of the lower line displaying in not bold but in italics). In Chrome, it all works fine.

I think it has to do with the font loading in Safari (similar to this: https://forum.squarespace.com/topic/202722-custom-font-not-displaying-in-safari/)

Can anyone provide the CSS updates I need to make so that this works as normal in Safari and on mobile? My current custom CSS is pasted below.
 
Thank you — any help is much appreciated!! 

---

Here is all my current CSS:
---

header {
    display: none !important;
}


/* image 1 */
.sqs-gallery-block-grid .slide:nth-child(1) .image-slide-title:after {
content: "Sponsor"; display: block; font-size: 15px; font-family: Josefin sans; font-style: italic; margin-top: -5px;
}

/* image 2 */
.sqs-gallery-block-grid .slide:nth-child(2) .image-slide-title:after {
content: "Co-Producer"; display: block; font-size: 15px; font-family: Josefin sans; font-style: italic; margin-top: -5px;
}

/* image 3 */
.sqs-gallery-block-grid .slide:nth-child(3) .image-slide-title:after {
content: "Co-Producer"; display: block; font-size: 15px; font-family: Josefin sans; font-style: italic; margin-top: -5px;
}

/*First line bold */
.image-slide-title:first-line {
    font-weight: bold;
}

unnamed.png

Link to comment
  • Replies 2
  • Views 554
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.