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

I don't know how to make it say the correct category name, but maybe you could just hide it. .BlogList-filter { display: none; }

If you just want the intro color on the rooms page, change it to #collection-63da940d0e624256024fb702 .Intro { background-color: #e7e7e7 !important; }

Settings in Edit > Edit Header > Layout will help you fine tune this as well as adjusting the padding numbers in the code. This code doesn't update in real-time as you edit like in Custom CSS, so save to see changes.

This is a good start that will take some tweaking on your end for desired spacing etc. I added this to Settings > Advance > Header Code Injection. The test site I used had the following header settings: - Site Title / Logo was should be set to The Baker Group logo (I didn't upload this in testing) - Desktop header logo was set as centered - Mobile header logo was set as left-aligned. The code below inserts a floating div containing an image on top of your header. Div is only there if you want to apply a link, and it helps with mobile settings. <div class="logo2-container"> <img class="logo2" src="https://images.squarespace-cdn.com/content/v1/5c5dea18a56827339bd6480f/4b1c3de5-c125-48b9-976b-df1042b2572f/CS_logo_RGB_300DPI.png?format=500w"> </div> <style> .logo2 { height: 60px; padding-top: 25px; padding-left: 25px; } /*Mobile Styles*/ @media only screen and (max-width: 600px) { .logo2 { display: inline; height: 30px; padding-top:80px; } .logo2-container { height: 120px; } } </style>

Actually, I think you can combine the code like so: //***Homepage Font Sizing***// #block-yui_3_17_2_1_1676657096961_9238, #block-11d51f4bc5da4b443af7, #block-b9ab9ab5f2feed324232 h4 { font-size: 3.5rem !important; @media screen and (max-width:1140px) { font-size: 2.5rem !important; } }

Try adding this to Custom CSS. You may have two tweak the font size properties. The first font size applies to desktop. The second applies to tablets & phones. #block-yui_3_17_2_1_1676657096961_9238, #block-11d51f4bc5da4b443af7, #block-b9ab9ab5f2feed324232 h4 { font-size: 3.5rem !important; } @media screen and (max-width:1140px) { #block-yui_3_17_2_1_1676657096961_9238, #block-11d51f4bc5da4b443af7, #block-b9ab9ab5f2feed324232 h4 { font-size: 2.5rem !important; } }

What happens if you add a link to the image block settings?

Could you provide us access to your locked site?

P.S. Squarespace integrates with Mailchimp with it's native newsletter block; is there a reason you don't want to use that?