Ziggy

Put this into the Custom CSS on your website.
This will hide the blog excerpt globally on your website from summary blocks, and can be targeted to specific pages if you need.
@media only screen and (max-width:767px) { .sqs-block-summary-v2 .summary-excerpt { display:none; } }  

If you're a Circle member you can get trial websites for 6 months, and these can be extended. They can also be duplicated and this typically resets the trial. I don't know of a better way to keep custom templates. As a designer on Squarespace for many years, I haven't had much need myself to have my own templates, but I will sometimes duplicate a website I've created in the past to fulfil a similar need, though I generally like to start from scratch to build more unique designs.
(Memberships are per website not per account)

@CuriousUndertakings, it looks like your website is built in Fluid Engine, have you edited the mobile version of the website? Unlike with the classic editor, you have quite a lot of independent control of the mobile version of the website and you can (and have to!) rearrange all of your blocks in the mobile editor before saving the edits you've made. 
When editing, click on the mobile icon in the top right.
This should be all you need to do, but I apologise if I've misunderstood and you already know this!

Hi @MikePintea, easy fix for you! You don't need any custom CSS, just change the section setting from small to large, and if you want the video to appear at the top of the section on mobile change the alignment to top. I would recommend that you check the page (when editing) in mobile mode (mobile toggle in the top right of the screen), to make sure the design is correct there.
Hope this helps!

Did you change the size of the section height in the footer or on the page behind the video? I was suggesting section that contains the video or the footer will be massive!

Try this Custom CSS
@media screen and (max-width:640px) { .tweak-product-item-details-alignment-left .ProductItem-details { text-align: center; } .ProductItem-details .product-restock-notification:not([hidden]) .product-restock-form>input[type='text'] { width:90%; } .tweak-product-item-details-add-to-cart-button-style-outline .ProductItem-details .product-restock-notification:not([hidden]) .product-restock-form>input[type='submit'] { width:100%; } } Let me know if it helps!

Try this as a solution, add to your Custom CSS:
@media only screen and (max-width:640px) { .blog-basic-grid .blog-excerpt p { white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-basic-grid .blog-meta-section { display:none; } } You can adjust how many lines the excerpt has by changing the 2 in this line -webkit-line-clamp: 2;
You may want to adjust the 640px depending on the breakpoint to match the one you used for the two column layout.
Please upvote if this has helped!

Try this as a solution, add to your Custom CSS:
@media only screen and (max-width:640px) { .blog-basic-grid .blog-excerpt p { white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-basic-grid .blog-meta-section { display:none; } } You can adjust how many lines the excerpt has by changing the 2 in this line -webkit-line-clamp: 2;
You may want to adjust the 640px depending on the breakpoint to match the one you used for the two column layout.
Please upvote if this has helped!

Try this as a solution, add to your Custom CSS:
@media only screen and (max-width:640px) { .blog-basic-grid .blog-excerpt p { white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-basic-grid .blog-meta-section { display:none; } } You can adjust how many lines the excerpt has by changing the 2 in this line -webkit-line-clamp: 2;
You may want to adjust the 640px depending on the breakpoint to match the one you used for the two column layout.
Please upvote if this has helped!

Try this in the Custom CSS, you'll have to adjust the pixel radius to suit your design:
.sqs-block-summary-v2 .summary-thumbnail { border-radius:20px; }  

Hi @James_9848, this is what you need:
#collection-60b9dadbc8f89f0d0d502b31 { .section-background { background: linear-gradient(145deg, #3366ff, #00ff66); background-attachment:fixed; } } Let me know if this has worked.

You're right about where the padding is coming from, each item has a margin of 60px (in orange), and the page has a padding of 60px on the bottom (in green). 

You could reduce the padding on this page at the bottom to close up this space like this:
#collection-6325b19ad02c7d387fa51499 .Main-content { padding-bottom: 0px; } (change 0px to whatever you want)

You need to use a media query in the Custom CSS to target mobile (using screen max-width), and then target the text block with the block ID, and then set the text alignment to center:
@media screen and (max-width:749px) { #block-yui_3_17_2_1_1660700494123_911821 { text-align:center !important; } } Let me know if that works for you!

Try this:
.form-block .lightbox-handle { transition:all ease-in-out 300ms; &:hover { background-color:#fddb27 !important; opacity:1 !important; } }  

Hi @Venera, try this adjustment to your code:
<a href="#top" class="t-top"><span class="arrow"></span>Back to top</a> <style> /* Back to Top */ .t-top { text-align: center; display: block; font-family: 'VeneraUtopia' !important; font-size: 1.2em; } .t-top .arrow:before { font-family: 'VeneraUtopia' !important; content: "*"; text-align: center; display: block; font-size: 2.5em; line-height: 0.5em; margin-top: 0.3em; } .t-top .arrow {display:inline;} html {scroll-behavior: smooth;} </style> adjust these lines to exactly how close you want the * to the text below and the section edge above:
    line-height: 0.5em;
    margin-top: 0.3em;
I also added this line to scroll smoothly back to the top instead of jumping, remove if you don't want it.
Please let me know if this worked, and upvote if this was helpful!

Hi @Venera, try this adjustment to your code:
<a href="#top" class="t-top"><span class="arrow"></span>Back to top</a> <style> /* Back to Top */ .t-top { text-align: center; display: block; font-family: 'VeneraUtopia' !important; font-size: 1.2em; } .t-top .arrow:before { font-family: 'VeneraUtopia' !important; content: "*"; text-align: center; display: block; font-size: 2.5em; line-height: 0.5em; margin-top: 0.3em; } .t-top .arrow {display:inline;} html {scroll-behavior: smooth;} </style> adjust these lines to exactly how close you want the * to the text below and the section edge above:
    line-height: 0.5em;
    margin-top: 0.3em;
I also added this line to scroll smoothly back to the top instead of jumping, remove if you don't want it.
Please let me know if this worked, and upvote if this was helpful!

Hi KatieQ can you try adding this code that I've slightly adapted from https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile
@media only screen and (max-width: 640px) { .summary-item-list:not(.sqs-gallery-design-carousel) { display: flex; flex-wrap: wrap; } .summary-item:not(.sqs-gallery-design-carousel) { width: 45% !important; margin: 4vw 2vw !important; } } I've add a :not that should exclude the carousel from this code. 
If you want the code just to apply to post in that blog, you can put the CSS into the Post Blog Item Code Injection in the Blog Advanced Settings, just remember to put it within <style></style>.
Please let me know if this works and upvote, thanks!

The padding on this page is set to 8vw, so the wider the screen the bigger that padding will be. It's a pretty easy fix. Add this Custom CSS:
.blog-item-wrapper article.entry { padding-top:40px; padding-bottom:40px; padding-left:4vw; padding-right:4vw; } You can adjust the values to your liking.