jmerrill

@tuanphan sorry about that. I had to fix a domain issue. You can now see the live site here: https://upliftingme.co

@tuanphan I'm looking to add a single header image to all blog post pages - similar to the screenshot above with orange image. Could I get some CSS code to achieve that for blog pages. URL: uplifting.me

@Ziggy Perfect! Thank you!

@Ziggy This is the code I now have in there now—but it's still displaying all items on mobile (with and without the block ID added in there): #block-yui_3_17_2_1_1698336619044_8986 @media only screen and (min-width:768px) { .sqs-gallery-design-carousel-slide { width: 12.2% !important; padding-right: 1% !important; padding-left: 1% !important; } }

@Ziggy There we go! Thank you. Working now. There was a tiny bit of overflow on a 9th item so I adjusted the percentages and looks great now. Any way I could get some code to reduce the item count for tablet and mobile screens?

@Ziggy Added the code but no visible change to that summary block - still displaying 5 items.

Hey @Ziggy, Just curious - why is it I always add my domain in the URL field when creating a post but it doesn't display??? Anyways, sorry. here you go: https://liftin.me

I'm using a summary (carousel) block on my homepage along with the Lazy Load plugin set to randomize for more than 30 items. This all works great. But I would like to be able to have somewhere between 6-8 items display per row, instead of the default max of 5 per row.

Perfect - thank you @CassAggett

Thank you! @Web_Solutions This gives me the basics of what I'm looking for. I'd also like to achieve two things: 1. Have the newsletter (input and button) expand to the full width of the newsletter block. Right now it's fixed to a certain width no matter how far I expand the block. I'd like it to extend to the center of the screen. 2. Reduce the height of the input and button. Thanks for your help.

@tuanphan Sorry for the delay. Yes, you can view the site (see footer) here: URL: https://liftin.me/ PW: lifting

I have the following CSS that I'm using to change a single text block to 4 columns on desktop. However, I'd like to force the same text block to 2 columns on mobile: // Multi-Column Text // #block-yui_3_17_2_1_1698600219155_10162 {p {column-count:4; column-gap:5%;} } URL: https://liftin.me/movements PW: lifting

@tuanphan I'm using the css you provided above to slim down the height of the newsletter input and button. Works great and it now looks like the image with the dark grey bg). I'd like to be able to close the gap between the input and the button so it looks more like the image with the beige bg. Appreciate your help!

@tuanphan Well, I discovered a plugin from Will Myers that I had to purchase. But it does the job!

Hey @tuanphan I have a summary block set to carousel mode on desktop and would like to increase the number of items per row from it's current max of 5 to somewhere around 8-10 items. Is this possible? URL: http://oilandstone.co PW: oilandstone

Thank you!

@tuanphan thanks—this works great for desktop, but on mobile the "Sign Up" text needs some padding on the right.

@tuanphan Any help on this would be greatly appreciated!

I'm using the following code from detraform.com for a minimal newsletter block. But I can't figure out how to adjust the left padding for "Email Address" to 20px and right padding for "Sign Up" to 20px. It particularly looks back when in mobile view. Any help would be appreciated. // Newsletter Block - Global // .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; border: 1px solid; border-color: #C5C4C5; .newsletter-form-fields-wrapper { width: ~"calc(75% - 8px)"; margin: 0px; .newsletter-form-field-wrapper { display: block; width: 100%; padding: 0px; } input { font-family: 'Helvetica Neue'; letter-spacing: 0.025rem; font-size: 1rem !important; line-height: 1em; padding: 15px 20px; background-color: #ffffff; @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-family: 'Helvetica Neue'; font-size: 1rem; line-height: 1em; letter-spacing: 0.025rem; color: grey !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: none !important; vertical-align: top; box-shadow: none !important; padding: 17px; width: 100%; font-family: 'Helvetica Neue'; font-size: 1rem !important; line-height: 1em; letter-spacing: 0.025rem; text-align: right !important; span { text-align: right !important; text-transform: none; color: #4B4BD7 !important; font-weight: 500; &:hover { opacity: .85; } } @media screen and (max-width: 1024px) { text-align: right; padding-left: 0; padding-right: 10px; } @media screen and (max-width: 640px) { text-align: right; padding-left: 0; padding-right: 0; } } @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: 12px; } } @media screen and (max-width: 1200px) { text-align: right; width: 100%; } } } } URL: oilandstone.art/michelangelo PW: oilandstone Note: The newsletter block is at the bottom of the first section and looks like this for desktop and mobile:

@tuanphan Update: For some reason—out of the blue—the code is now working correctly. No idea why since I didn't change a thing, but I'll take it lol. The only remaining issue is that no homepage banner images display when I visit artabounds.net, (PW: artabounds) but I'm assuming that might resolve when I launch the site and get off of a trial account.

@tuanphan Does it matter if I haven't published the site yet and am still working on a trial account? For some reason this is what I see when I arrive at the official domain (artabounds.net😞 And this is what I see when I am working with Squarespace's built-in domain:

@tuanphan I noticed that as well and am not sure why the images don't display. As you can see in the screenshots below, I still have them uploaded via the Link Editor modal, and they are also still included in the code injection section. And, for good measure, I've also included a screenshot of the CSS code.

Thank you, but no difference. On refresh, first image still shows for a split second before displaying the next random image. In order to debug, I first want to make sure that I've set up the homepage section correctly. Here is a screenshot of what I've done. I added a background image (banner-image-01.jpg) to the top section of the homepage:

https://static1.squarespace.com/static/64c4b1978afb0d5cacf7f225/t/64d5b96a546fe041893b89f9/1691728236707/banner-image-01.jpg

Thanks @tuanphan But, unfortunately it's doing the same thing even though I added the code into the Custom CSS panel.