Ziggy

Fantastic! Can you upvote my answer?

This should work on the main store page, and from looking at your site, it is working. Were you wanting the homepage 3 products to be 2 across on mobile?

No problem, thanks for sharing! From inspecting the website, I can't see where that inconsistent spacing is coming from, I can't see blank spaces, and I can't see text spaces in the elements. What happens if you create a new scrolling block with the same text on the page? Is there any CSS that might be interfering?

Try this Custom CSS: .header-nav-folder-content { background-color:none; } .header-nav-wrapper .header-nav-item a { color:#fff; } Hope it helps

Nope, that was me missing something: .sqs-block-image img { opacity:0.6; transition:ease-in-out 300ms; &:hover { opacity:0.9; } } I deleted a semicolon, just to demonstrate how easy it is to have mistakes in code.....or maybe just by accident!

Not a problem, good luck with any tweaks you make.

It is probably worth saying that CSS can have impacts across your website, and you should be careful to understand what you're adding before doing it, or employ someone who does know to avoid a potentially broken website.

This will make images have an opacity of 60% and 90% when hovered on. Place in Custom CSS under the Design dashboard option. .sqs-block-image img { opacity:0.6 transition:ease-in-out 300ms; &:hover { opacity:0.9; } } You can replace .sqs-block-image img with anything you want, block IDs list sections, gallery images etc.

@Umlaut You can try this Custom CSS if you remove the other code: section[data-section-id="6344830c182f827682537afd"] { .newsletter-block .newsletter-form-wrapper .newsletter-form-field-wrapper { padding-right:0; } .newsletter-block .newsletter-form-field-element { background:none; border-top:2px solid white; border-bottom:2px solid white; border-left:2px solid white; } ::placeholder { color:#fff !important; } .newsletter-form-button-wrapper { margin-left:-6px; } .newsletter-form-button { background:#d92c5a !important; border-top:2px solid white !important; border-bottom:2px solid white!important; border-right:2px solid white!important; } }

Looks like you found it here: https://www.detraform.com/blog/free-squarespace-plugin-minimal-newsletter-block The way this has been redesigned looks nice, but it doesn't allow for a background color on the button, the border isn't in the right place which is why the button doesn't seem to extend far enough to the right. It would be possible to achieve the look you're after, but probably not with that code.

You can add a hover effect to any block in CSS, and set an opacity. You would just need the block ID if you wanted to target one individual block, or a class if you want to target all image blocks on a page or more.

Hmm, can you try this? @media only screen and (max-width:640px) { #new-page-94 { .Index-page--has-image .Index-page-content { min-height:100vh !important; display:flex; -webkit-box-orient: vertical; flex-direction: column; -webkit-box-pack: center; justify-content:center; } } }

Try this in Custom CSS: @media only screen and (max-width:640px) { #new-page-94 { min-height:100vh; } }

Can you share the website URL?

I think you have "display source code" checked, uncheck that as it displays the code rather than rendering the code. I've tested it, and it will work, but there are issues with some of the CSS as it's referencing generic classes like body that get used for the rest of the page.

@SteveBarrett This is a different solution, so hopefully helpful. If you placed all of the items in a single code block you could use CSS grid to lay out the boxes and adjust them on tablet/mobile however you like, the boxes will stay even in height. Add your content into the HTML in place of the <p>text</p> and add any styling to .grid-item in the CSS. HTML: <div class="grid"> <div class="grid-item"> <p>text</p> </div> <div class="grid-item"> <p>text</p> </div> <div class="grid-item"> <p>text</p> </div> <div class="grid-item"> <p>text</p> </div> </div> Custom CSS: // main grid style // 3x columns on desktop // .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 10px; gap:40px 20px; } // box style .grid-item { text-align: left; border: 2px solid #416ba9; } // 2x columns on tablet @media screen and (min-width:700px) and (max-width:1000px) { .grid { display: grid; grid-template-columns: 1fr 1fr; } } // 1x columns on mobile @media screen and (max-width:700px) { .grid { display: grid; grid-template-columns: 1fr; } } Hope that helps! (If you want to have different code blocks with different columns needed, you'll need to use different classes to .grid and .grid-item throughout the code and CSS. e.g. .gridx4 and .gridx4-item)

Try this custom CSS: @media screen and (max-width:767px) { .products .list-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; display:grid; grid-column-gap:12px; grid-row-gap:12px; }} Let me know if that works!

It would be helpful if you could password protect the website and then share the URL and password. This thread seems to have helped a few people:

This is a problem that crops up regularly. I would suggest that you could hide the List Section Title, and replace that with a bottom-aligned narrow section with a text block to replace the title, and you can then add a code block with your anchor ID (or add the title in the code block depending on your preference.) This is a work around, but it will work, and shouldn't affect the look. Hope that helps!

I don't see it on your website, can you put it somewhere to demonstrate the problem?

Thank you for the password, but please can you share the website URL too? My guess is that there may be blank items in the scrolling block, but I can't tell for sure without inspecting the website.

Yes, the fixed text is interfering with the footer by having a higher z-index, this should fix it: #footer-sections { z-index: 999; } Hope that helps!

If you want to achieve that type of look, you'll either have to find a Squarespace plugin that does what you want or employ a Squarespace coding wizard to do that, it's most likely too complex a request for someone on the forum to have a direct answer for you. Check these out: https://www.ghostplugins.com/plugins https://sqspthemes.com https://squarerefresh.com/plugins https://www.sparkplugin.com/blog/top-squarespace-plugins There are many more, I hope that you find what you need!

Can you share what you've done, a screenshot or the code you've added, and a link to your website?

I'm not sure what code you're using, but you could try this: @media only screen and (min-width: 768px) { .fe-block-yui_3_17_2_1_1666291546789_152701 { position: sticky; top: 100px; } }