Ziggy

Look like you need this CSS too: .product-block .productDetails .product-quantity-input input { background-color: #000; color: #fff; border: 0.1px solid #fff !important; } Give me a thumbs up if that helped!

Hi! Tricky problem! You're running into a common problem where your background image which covers the background by either fitting the width 100% and cropping the top and bottom (as on desktop), or filling the height 100% and cropping the left and right (as on mobile). This means that on mobile the image will only adjust where there is cropping, i.e. left and right, you won't be able to move the background image up and down. You could use a little CSS code to adjust the text position on mobile, this for example should help if you add to your Custom CSS: @media only screen and (max-width:640px) { #block-yui_3_17_2_1_1413555146600_9259 { display:none; } #block-yui_3_17_2_1_1589535590443_11113 { padding-bottom:160px; } } This is a bit of a hacky fix, as it hides one spacer block and increase the size of another, but background images are tricky and by definition are underneath and unconnected to the content on top. Using the most recent version of Squarespace, 7.1 on Fluid Engine really helps with situations like this as you can adjust the layout on mobile separately from the desktop version.

Yes, this is what I was suggesting. Generally it's helpful to share your website URL so that you can get the most relevant advise, knowing a bit more about your setup and design, including Squarespace version, really helps. If you're on Fluid Engine, you can very easily make the grid span top to bottom with no extra space, If you're on classic engine, I can give you code to reduce the padding.

Look at this guide: Per-page code injection

You have the mode set to CSS, but your code is in HTML

Try adding this: .newsletter-block .newsletter-form-wrapper .newsletter-form-body { display:flex; } The main problem is the block being constrained too much to suit the design.

The active won't work as the folder is not active with your setup. Did you add this to the individual page header code injection area for the relevant pages in the navigation? Or did you add it globally? It needs to be done the first way. It's not a great solution, but the only way I can see it working.

Worth a shot I'd say! If it doesn't work we can hopefully find another solution.

Can you share your website URL?

Try this: .variant-select-wrapper select, option { background: #000; color:#fff; padding: 10px; }

No problem! Glad to help!

Hoping that this guide will help you, if I've understood your aim correctly: https://www.will-myers.com/articles/reorder-product-details-in-product-item

The search page is a built in page, and not directly customizable, it's colour is determined by the default colour theme for the website, so could be a good option to change that on your website: https://studiomesa.co/articles/default-color-theme Just be careful to check all of your pages after you make this change. This is a good guide for styling with Custom CSS: https://insidethesquare.co/squarespace-tutorials/search-results

This thread seems to have an answer for you: https://forum.squarespace.com/topic/178558-adding-add-to-cart-button-to-summary-block/

Have you tried using a single summary block instead of multiple product blocks? https://support.squarespace.com/hc/en-us/articles/206543337-Summary-blocks

Should be solvable! Can you share your website URL?

Try this thread: https://forum.squarespace.com/topic/166170-getting-around-shop-all-200-max-products-limitation/

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.