How to change caption width in collage view?

I am trying to increase the width of a caption in Squarespace when using collage view. I can’t seem to increase only the caption without the image and font sizes are increasing as well.

The real goal is that the text "Stephanie Fesneau &" to appear all on the same line, which is why I thought of increasing the width of the caption. I would not want to make the font smaller to fit it all in, but if you have any other solutions I am open.

Block ID is #block-59735afb962b7d6823ed.

Here’s the HTML of the part that I would like to change (I believe):

<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-59735afb962b7d6823ed"><div class="sqs-block-content" id="yui_3_17_2_1_1729627269553_595">    

      <figure class="sqs-block-image-figure image-block-outer-wrapper image-block-v2 design-layout-collage combination-animation-none individual-animation-none individual-text-animation-none image-position-left sqs-text-ready" data-scrolled="" data-test="image-block-v2-outer-wrapper" id="yui_3_17_2_1_1729627269553_594">

        <div class="intrinsic" id="yui_3_17_2_1_1729627269553_593">
          
            <div class="
                
                image-inset" data-animation-role="image" data-description="" id="yui_3_17_2_1_1729627269553_592">
            <div class="sqs-image-shape-container-element
              
                content-fit
              
            " style="
              position: relative;
              overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);
              
            " id="yui_3_17_2_1_1729627269553_591">   
              
              
              <img data-stretch="true" data-src="https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg" data-image="https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg" data-image-dimensions="2141x1427" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg" width="2141" height="1427" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" style="display:block;object-fit: contain;" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg?format=100w 100w, https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg?format=300w 300w, https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg?format=500w 500w, https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg?format=750w 750w, https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/53151019e4b06a95ceb873c5/51e76151-f308-4b9b-87c7-b892ccf26349/steph+fausto.jpg?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs" class="loaded">

              <div class="image-overlay" style="overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);"></div>
            </div>
          
            </div>
          
        </div>
       
          
          <figcaption class="image-card-wrapper" data-width-ratio="">
            <div class="image-card sqs-dynamic-text-container">

              
                <div class="image-title-wrapper"><div class="image-title sqs-dynamic-text" data-width-percentage="29.9" style="font-size: max(0.75rem, 29.9%);"><p class="" style="white-space:pre-wrap;">STEPHANIE FESNEAU &amp;<br>FAUSTO CARPINO</p></div></div>           
            

            </div>
          </figcaption>
        

      </figure>

</div></div>
 

This is what I’ve tried so far (plus variations):

#block-59735afb962b7d6823ed .image-caption {
    width: 120% !important;
    left: -10%;
}

(does nothing)

#block-59735afb962b7d6823ed .sqs-block-content {
    width: 120% !important;
    font-size: initial !important;
    left: 0; 
    transform: translateX(-10%); 
}

(increases image as well, past the edge of the webpage)

.image-card {
    position: relative;
}

.image-title-wrapper {
    width: 120%;
    left: -10%;
    overflow: hidden;
}

.image-title {
    font-size: max(0.75rem, 29.9%);
}

(extends the caption but doesn’t shift left, so the text gets cut off)

div#block-59735afb962b7d6823ed {
    div.image-title em {
    font-style: normal;
    color: #fff;
    white-space: nowrap;
}
.image-card.sqs-dynamic-text-container {
    padding-left: 5% !important;
}
figcaption.image-card-wrapper {
    width: 60% !important;
}}
@media screen and (max-width:767px) {
div#block-59735afb962b7d6823ed figcaption.image-card-wrapper {
    width: 70% !important;
}}

(does nothing)

You need to sign in to view this answers