White-space: pre was interfering with wrap, now it wraps but loses font style

Site URL: https://www.ericklistman.com

Ok, so I figured out that the "white-space: pre" command was didn't wrap the text so now I used "white-space:pre-wrap". Now the overflow wraps but I lose the style in the second line (the one after the break). My title is bold until it breaks and makes another line: it un-bolds the text. Does anybody know a solution to retain the font style even after "white-space:pre-wrap" breaks the line? Thanks! 

Here's the CSS:

//Gallery Captions
.gallery-caption {background:#09272A; }
.gallery-caption p {white-space:pre-wrap;text-align:center; padding-left:.5rem; padding-right:.5rem}
//.gallery-caption p:first-line {color: #B8C9CB; font-size: 1.2rem; font-weight: bold; }: I Commented this out because it was only highlighting before the break. I looked everywhere I knew and couldn't find a workaround. 

Here's a photo of what it looks like. You can see what is happening in the middle photo "What Happens in the Mountains, Stays in the Mountains":

Hi @1_Caveman_Mashing_Buttons-

You need to remove :first-line from your code. This pseudo-element applies the style to the first line of the paragraph only.

.gallery-caption p{
	color: #B8C9CB;
	font-size: 1.2rem;
	font-weight: bold;
}

11 hours ago, meganheath said:

Hi @1_Caveman_Mashing_Buttons-

You need to remove :first-line from your code. This pseudo-element applies the style to the first line of the paragraph only.

.gallery-caption p{
	color: #B8C9CB;
	font-size: 1.2rem;
	font-weight: bold;
}

 

@meganheathThanks! I tried that and it doesn't change the captions not even with !important. I'm not sure if I have some line of css that's interfering with the captions or if my specificity is not enough to overwrite Squarespace's. I'll share the css I've Frankensteined together and maybe more knowledgeable eyes can spot the inefficiencies. Apologies in advance to the aesthetic sensibilities of those savvy in css for my clunky writing, I've relied on cobbling others' solutions together to the best of my very limited abilities:

//Gallery Captions
.gallery-caption {background:#09272A; }
.gallery-caption p {white-space:pre-wrap;text-align:center; padding-left:.5rem; padding-right:.5rem}
//.gallery-caption p:first-line {color: #B8C9CB; font-size: 1.2rem; font-weight: bold; }
//Dropdown menu
.header-nav-folder-content{background:linear-gradient(to bottom, #2B555A,#00181A) }
.header-nav-folder-content{text-align:center!important;}
.header-nav-folder-content{border-radius:15px}
.header-nav-folder-content{border: 3px solid #CBD4EA}
.header-nav-folder-content a {padding-bottom:.5rem!important; }
.header-nav-folder-content{box-shadow: 5px 5px 15px rgba(134,172,161,0.98)}

//Universal font colors
h1 {color: #A6C4BE !important;}
h2 {color: #A6C4BE !important;}
h3 {color: #A6C4BE !important;}
p {color: #A9BDC1 !important;}
a#site-title {color: #A9C1AC;}

//Dropdown Menu
.header-nav-item--active  {background:#19737D;}
.header-nav-item {padding:1.5rem 1rem 1rem 1rem!important; margin: -6rem 0 0 0!important;}
.header-nav-item a{background-image:none!important;}
.header-nav-item:hover  {background:#607E83}
.header-nav-item:hover a{color:#A9C1AC!important; opacity:1!important}
.header-nav-item--active:hover{background:#0EA5BC!important;}
.header-nav-wrapper a:hover {color: #09E9F9 !important;}

//Carousel list buttons
.list-item-content__button:nth-child(1) {border: 5px solid #CBD4EA !important;}
.list-item-content__button {background-color:#1E4245!important}
.list-item-content__button {box-shadow: 5px -5px 18px rgba(134,172,161,0.98)}

//Carousel arrows
.user-items-list-carousel__arrow-icon-background-area {background: linear-gradient(45deg, #097272,#C6E3E6); opacity:.7!important}
.user-items-list-carousel__arrow-icon-path {stroke-width: 3.5px}

//Back to top button position
#back-to-top{position:fixed!important; bottom:0!important;  right:0!important; z-index:1!important}

//Hover effect Masonry gallery
.gallery-masonry-item img:hover{height:100%!important; width:100%!important; transform:Scale(2);transform-origin : 50% 13%;
 transition-duration:2.5s}
.gallery-masonry-item {overflow:hidden}

//Hover effect Simple gallery
.gallery-grid-item img:hover{height:100%!important; width:100%!important; transform:Scale(2); transform-origin : 50% 13%;
 transition-duration:2.5s}
.gallery-grid-item {overflow:hidden}

//Search Bar
.search-input {background-color: #197272!important; }
.search-input { color: #0CFBFB!important }

/* Mobile list carousel */
@media screen and (max-width:767px) {
body.homepage ul.user-items-list-carousel__slides {
    grid-template-columns: repeat(2,1fr) !important;
}
}
#footer-sections * {text-align:center}

//--Background and Border contact form
.form-wrapper .field-list .field .field-element {background-color: transparent; border:none; border-bottom: 2px solid #0CF7EF; font-family: 'grand-central'}

//Contact form text
.form-wrapper .field-list .field .field-element:active, .form-wrapper .field-list .field .field-element:focus {background-color: #197272; outline: none}
.form-block input, .field-element{
color: #0CF7EF!important}
.form-wrapper .field-list .title {
  color: #8DD1E2}
.form-wrapper .field-list .field .caption {
color: #8DD1E2}

//search results
.sqs-search-page-input {border-radius: 25px; background-color: #197272!important}
.sqs-search-container-item .sqs-title {font-size: 1.5rem; text-decoration: underline}
.sqs-search-page-input input {color: #0CF7EF}
.sqs-search-container-item em {font-style:normal!important; font-weight:bold; background:#197272}
.sqs-search-page-item .sqs-main-image{border-radius:50%}

//Add Site Border to 7.1
body:not(.sqs-edit-mode-active) {
  &, #header {
    border: clamp(12px,3vw,70px) solid #364D4F;
  }
  #header { border-bottom: none; }
}

2 hours ago, meganheath said:

Hi @1_Caveman_Mashing_Buttons-

It's missing a class. Replace .gallery-caption p:first-line with the following

.gallery-section .gallery-caption p{
	color: #B8C9CB;
	font-size: 1.2rem;
	font-weight: bold;
}

This will target the entire description.

It looks like you're wanting to create a Title and Description layout though. If you want to create a title then add your text within a h3 tag with your own class and then set the style under the class in the Custom CSS like this. See image attached 

.art-title {
	color: #B8C9CB;
	font-size: 1.2rem !important;
	font-weight: 700 !important;
}

 

 

Thank you @meganheath, you're awesome!!

! I came across something similar here:

And this is what I was trying to do:

</p>
<h4>Aitana </h4>
<span> Purity</span>
<sqsrte-small> Oil on panel</sqsrte-small>
<p>

It seemed to be working but I turned off the code last night because it was time intensive and it was late but I'll continue noodling around with it later and try out your version for captions and CSS. The issues I was encountering were mostly with margins and paddings due to the automatic spacing from new paragraphs so I was  attempting to counteract that on CSS. I can't even imagine how complex writing HTML must be! This is where I stopped last night:

//Gallery Captions
//.gallery-caption-wrapper 
> * {margin-top: 0;margin-bottom: 1px; 
padding-top:1rem; padding-left:.5rem; 
padding-right:.5rem}
//.gallery-caption-wrapper span {display: block;}
//.gallery-caption-wrapper {border-inline: 
.4rem solid #20282b; background:#0a2029; 
text-align:center; white-space:pre-wrap; 
h4 {color: #708d94}} 

But my right border was running off the box and disappearing and it was 4AM so it was a problem for a fresh brain!

Thanks for the help, I really appreciate it!! 

I'll come back later and let you know how your solution worked out.

I'm so happy with this community!!

@meganheath your solution worked! I'm just finishing up right now and everything looks like I wanted it to. Thanks! I had to noodle around with it a little and it's a lot of work to do it one by one --if you have to change it-- but doing this from the beginning should be no more difficult than regular captions. Here's how it looks:

You can see both solutions working well and adjusting to masonry gallery.

The way I structured your suggestion was:

//HTML OPTION #1 
For inside the image captions in galleries
This option gives you three lines: 
First two lines will be a heading (h4) 
and the third line will do your small paragraph font:



<h4 class=“art-title”>”Quick Figure Sketch”</h4>
<h4 class=“art-subtitle”>***available</h4>
<sqsrte-small>Graphite on paper</sqsrte-small>



//HTML OPTION #2 
For inside the image captions in galleries
This option gives you two lines: 
First line will be a heading (h4) 
and the second line will do your small paragraph font:



<h4 class=“video-title”>”Portrait of a Girl”</h4>
<sqsrte-small>Charcoal on paper</sqsrte-small>

And I adjusted the CSS I already had to work with this like so:

//CSS for adjusting boxes and captions 
I used a broad gallery wrapper term so it should 
apply to all galleries. 
This might be different for each person but this 
is what worked for me after much adjustment. 
I’m sure it can be better but if I can save anybody 
the days of work I put in to learn this, then feel free to use it! 

//Gallery Captions

.gallery-caption 
{padding-top:0; padding-bottom:0; 
margin-top:.25rem}

.gallery-caption-wrapper 
{background:#09272A;}

.gallery-caption-wrapper 
{border-inline: 1.5px solid #2d646e; 
border-top: .7px solid #2d646e; 
border-bottom:.7px solid #2d646e;} 

.gallery-caption-wrapper 
{box-sizing: border-box; 
white-space:pre-wrap;text-align:center; 
line-height: 1rem; 
color: #819fa3!important;}

.gallery-caption-wrapper h4 
{color: #729ba6!important}

.gallery-caption-wrapper h4 
{margin-top: 0px; margin-bottom:0px;}

.gallery-caption-wrapper p 
{margin:0; padding:0;}

So thank you for your help! This was driving me absolutely crazy!!

It's been fun learning CSS but you would imagine that Squarespace would be a bit more user-friendly and versatile with design options.

Do you think I could've done things more efficiently?

Cheers!

@1_Caveman_Mashing_Buttons- so glad it worked. A bit fiddly as you said but it looks great!