NickScola

Add the page section id to the CSS. So now your CSS should look like: #page-section-60b5ff33c0b2d87d1b46b7d5 .image-block, #page-section-60b618ca71ea826d88fbefbc .image-block { @media (max-width: 640px) { width: 20%; } }

Sorry for the delay, try this: .gallery-grid--layout-grid .gallery-grid-item { position: relative; overflow: hidden; &:hover { .gallery-caption { opacity: 1; } .gallery-caption .gallery-caption-wrapper { transform: translateY(0); } } .gallery-caption { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; opacity: 0; transition: opacity ease-in-out 0.25s; .gallery-caption-wrapper { height: auto; padding: 0 20px; text-align: center; transform: translateY(25vh); transition: transform ease-in-out 0.5s; } } }

What's the password to the site? It's currently locked.

Yes, there's a few ways to go about this. Have a go at this: .product-block .buy-button, .product-block .sqs-add-to-cart-button-wrapper { margin-top: 5px; margin-bottom: 5px; } Also, if your'e wondering why the checkout button is not moving closer its because there's a blank Squarespace block before the checkout button

Try adding this to the custom css section and let me know if this works for you: .user-items-list-simple { /* -- Mobile devices (not tablet) -- */ @media (max-width: 640px) { display: flex; grid-gap: 0px !important; padding: 0px !important; flex-wrap: wrap; } .list-item { @media (max-width: 640px) { width: 39%; margin-bottom: 40px; .list-title { font-size: 13px; } .list-item-content__button-container { max-width: 100% !important; } } } }

Add this to Custom CSS: .portfolio-grid-basic .grid-item .grid-image { order: 2; } .portfolio-grid-basic .grid-item .portfolio-text { order: 1; }

That's so strange. Add this: .sqs-add-to-cart-button { margin: 0 auto; }

Looks like for some reason the button get's applied an inline style that continues to reduce the width. That might be a Squarespace bug. However, try adding this to Custom CSS: .product-block .productDetails.center .sqs-add-to-cart-button-wrapper { width: 100% !important; }

Can you share a link to the demo site you're currently working with?

Yes, that's it.

Paste this code in the Custom CSS section: .page-section[data-section-id="60de0bfa33d7aa1e05234f69"] .content-wrapper { max-width: 100%; padding-left: 0px; padding-right: 0px; overflow-x: hidden; }

Ah, I see what's happening. On mobile Squarespace columns are full width. To fix this in this section only paste in Custom CSS #page-section-60b5ff33c0b2d87d1b46b7d5 .image-block { @media (max-width: 640px) { width: 20%; } }

Headings have margins applied to them. I notice you're using a code block for this and applying inline-styles to your H2. So just add margin-top: 0px;

If you go into Custom CSS and paste this in: #collection-60dd43fb867a9d19d3723218 .header-title-logo a { @media (max-width: 640px) { max-height: 120px; } } Feel free to adjust where needed.

What template are you using? Are you on 7 or 7.1? If you can share the link with the password to see the site that'll be great.