Jump to content

How do I add line breaks to gallery image captions/descriptions without impacting mobile view?

Recommended Posts

Hello!

I have added a full gallery section with captions, but there are some issues! Below is the code I have used in the past, but now it is causing issues in mobile view. With the full CSS, the mobile view is being very strange and showing 2 columns, not 1 and the right-hand column is beyond the mobile view width so you can actually manipulate the page. See photos below:

image.thumb.png.9d7965c0ef0094fdde0aa310fcbde245.pngimage.thumb.png.9a2fc88452dfa68ed3e61161779fecb1.pngimage.thumb.png.d22b4d353e53b3cbef3a727014249f52.png

 

When I removed the first line of code, the mobile view fixed itself, but now in the desktop version the image caption text does not have line breaks where I want them and is bold, instead of just the image title on the first line and bold/italic, and further description on the second line and not bold. See image below. Please help!

image.thumb.png.9d7965c0ef0094fdde0aa310fcbde245.png

 

CURRENT CSS:

.gallery-caption p {white-space:pre}

.gallery-caption p {text-align:center}

.gallery-caption p:first-line {color: black; font-size: 0.9rem; font-weight:bold;

font-style: italic;

}

 

NEW CSS (but is not working with line breaks):

.gallery-caption p {text-align:center}

.gallery-caption p:first-line {color: black; font-size: 0.9rem; font-weight:bold;

font-style: italic;

}

 

And here is the URL: https://www.sipartspace.com/gallery

 

Edited by Alexi47
Added URL
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.