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("loaded")" 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 &<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
Leave feedback about this