1_Caveman_Mashing_Buttons-

@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!

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!!

@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; } }

SOLVED: White space pre wasn't wrapping, you need to use white-space:pre-wrap (or another one of the white space versions- you can find them easily once you know to look for them). I'll leave this here in case anybody else that's new to css runs into this issue. I don't know css so it took me a good chunk of my day to find the solution. //Gallery Captions .gallery-caption {background:#09272A; } .gallery-caption p {white-space:pre-wrap;text-align:center; padding-left:.5rem; padding-right:.5rem}

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":

You are amazing! Thank you, so simple, so elegant. I adjusted to 13% because most of the images' focal point do fall on the top third so that is good enough to present the important parts. All I wanted was for them not to zoom into a breast because people could see it as distasteful. Thank you for this!!

Site URL: https://www.ericklistman.com Hello! I've been scouring the forums looking for the solution and tried all the css lines I found and none of them have worked so far for my website (about 20 different solutions given to others) . The captions under the images run off the box and don't wrap around. I'm at a complete loss and considering removing all css concerning galleries because I don't know what else to do. My website is: https://www.ericklistman.com and this is under Portfolio-Paintings Thank you to anybody who might have a solution. Here is an image of what it looks like:

Hi @creedon, I managed to get zoom to work in my galleries but it's zooming straight into the middle. I set the focal points for all of them hoping that it would zoom to them but it didn't work. Do you know of a way of setting up a snippet of css to tell the image to zoom into the focal point on hover? I just took this one from @inside_the_square and it works well but I would like to figure out that extra step if possible. Thank you! Here are the lines she shared: :hover{height:100%!important; width:100%!important; transform:Scale(2); overflow:hidden!important; transition-duration:2.5s} .gallery-masonry-item{overflow:hidden!important} This is the link to my site in case it's important: https://www.ericklistman.com I looked around but: 1) I'm not savvy about where to look and 2) there doesn't seem to be much this specific. It's important for me because if I'm displaying a portrait, I don't want it to zoom into the breasts! I just want to give visitors an idea of what it might look like if they get their portrait painted. Thanks again! Awesome community so far. Here is a sample with the third image zoomed in, I would like it to zoom into the face instead of the body:

Soved! With solution from @tuanphan in a different post for custom CSS: /* Mobile list carousel */ @media screen and (max-width:767px) { body.homepage ul.user-items-list-carousel__slides { grid-template-columns: repeat(2,1fr) !important; } }

Site URL: https://www.ericklistman.com Hello everyone! I'm having trouble switching my Carousel List Display on Mobile to show TWO ITEMS instead of one. I've combed through the forums and tried a few different solutions offered there but none of the CSS affects my display on mobile version. The problem is that if it only shows one display, older people visiting the site don't intuitively understand that they need to scroll through the carousel and it drives them toward the menu... I want them to hang around the homepage for a bit and look at the content there before navigating to the secondary pages. I would very much appreciate help with this issue. I'm on a personal plan for 7.1 so I don't have access to code injection. This is on homepage (not sure it makes a difference). I mention it because I was reading that this is not possible to do on cover pages for Squarespace 7.0 so I thought it might be important to mention. This community is amazing! Thanks for all your help, I've been able to customize some things through CSS and look forward to learning more to make my website more dynamic. Thank you for helping! My URL is: https://www.ericklistman.com Here are examples of how the website displays (which I'm sure everybody knows!). Just sharing for others who might have similar issues: