ReformDesign

Y'all - I struggled with this forever. On my client's 7.1 Site this was the fix in Custom CSS for Product List Page. .grid-image-cover { object-fit: contain !important; }

Any thoughts?

https://www.alyssadelabruere.com/print-shop pw: printshop How can the image thumbnails on this page be center aligned vertically? Relevant CSS already on the site is as follows: section[data-section-id="64e915dcc39fa836dbd36002"] { .grid-item-image { width: 100% !important; height: auto !important; } .grid-title { text-transform: capitalize !important; } }

What is the software?

Yes, those photos.

Thought I did. My bad! www.ravenflowerfarm.com

@tuanphan

I pulled some code from a Squarespace blog to customize the newsletter block. The submit button label is overflowing the block wrapper at viewport widths less than ~ 420px. I can't find where that's fixable in the CSS. .newsletter-form-header{ display: none; } .newsletter-block { padding-top: 0 !important; .newsletter-form-wrapper { background-color: transparent; padding: 0 !important; .newsletter-form-body { flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: ; display: flex; padding-bottom: 0; padding-right: 10px; border: 1px solid black; background-color: hsla(0, 0%, 100%, 0.08); .newsletter-form-fields-wrapper { width: ~"calc(75% - 8px)"; margin: 0px; .newsletter-form-field-wrapper { display: block; width: 100%; padding: 0px; } input { font-family: ; color: black; font-size: 16px; font-weight: 500; text-transform: none; padding: 15px 10px; background-color: transparent; @media screen and (max-width: 640px) { padding: 15px 15px; } @media screen and (max-width: 420px) { padding: 17px 0 17px 12px; } display: block; border: none; &::placeholder{ font-size: 16px; line-height: 1.4em; letter-spacing: 0; color: black !important; } } @media screen and (max-width: 1350px) { width: ~"calc(70% - 8px)"; } @media screen and (max-width: 1200px) { width: ~"calc(64%)"; } @media screen and (max-width: 1024px) { width: ~"calc(75%)"; } } .newsletter-form-button-wrapper { width: 24%; height: 100%; margin: 0px; padding: 0; margin-top: 0px; vertical-align: middle; button { background-color: transparent !important; border: unset !important; vertical-align: top; box-shadow: unset; padding: 17px; width: 100%; font-family: 'Copperplate'; font-size: 0.85em; line-height: 1.5em; letter-spacing: 0; text-align: right !important; span { text-align: right !important; text-transform: lowercase; color: black !important; font-weight: 600; &:hover { opacity: .7; } } @media screen and (max-width: 1024px) { text-align: right; padding-left: 0; padding-right: 17px; } @media screen and (max-width: 640px) { text-align: right; padding-left: 0; padding-right: 10; } } @media screen and (max-width: 1350px) { text-align: right; padding: 0 30px; width: 32%; .newsletter-form-button { padding-right: 0; } } @media screen and (max-width: 1024px) { text-align: right; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 15px; } @media screen and (max-width: 640px) { padding-right: 2px; } } @media screen and (max-width: 1200px) { text-align: right; width: 100%; } } } .newsletter-form-footnote { display: none; margin-top: 16px; } }

fiddle-elephant-gya2.squarespace.com PW: reform

@tuanphan I have a similar portfolio in hover:cursor mode. I'd like to reduce the opacity and/or add a filter to the images that display on hover. Any ideas?

Add .tweak-blog-list-style-grid .BlogList-item { margin-left: 35px; } There was a right margin applied already.

I think you just have to put it inside a parent element. <div style="text-align: center;"> <p4 style="font-weight: bold;"> in • ter - con • scious<br> </p4> <p4 style="font-style: italic; font-weight: bold; color: grey">/inˈtər -ˈkänSHəs/<br> </p4> <p4>the situation or scene between competing desires or goals<br> </p4> </div> Just curious, is there a reason you're not using text blocks?

Not the best way to handle it, but you could just hide the section. .section[data-section-id="63f116c8bacaa63f8da73298"] { display: none !important; } Put this in Custom CSS.

Do you want the PDF to be a copy of their form submission?

.BlogList.BlogList--posts-excerpt.sqs-blog-list.clear { display: flex; flex-wrap: wrap; justify-content: center; }