rwp

Bingo! Thanks again rwp!!

Worked like a charm! Thank you @rwp

@Sarahpsilva
@media screen and (max-width:640px) { #block-yui_3_17_2_1_1593024627138_17518 .sqs-gallery-design-grid-slide { width: 33.33% !important; } }  

@Sarahpsilva
@media screen and (max-width:640px) { #block-yui_3_17_2_1_1593024627138_17518 .sqs-gallery-design-grid-slide { width: 33.33% !important; } }  

Can't believe it was that easy. That did the job marvelously. Thank you!

Try using copy and pasting all of this code into the footer code injection area (directions in my signature on how to do that).
https://jsfiddle.net/pelletr1/x6sqo4nc/20/

THIS IS AMAZINGGGG! It totally works! 
For anyone looking to add this you have to add it here on your site (as outlined in rwp's notes):  Settings -> Advanced -> Code Injection
The only thing I changed was the font (see attached screen shot). The new injected code changed my body copy font to "Neutron" and so I changed it back to "Aktiv Grotesk" and tweaked the font weight, line height, etc. in the injected code. 

#collection-5e6fc99f4c83170df780908e .Site.loaded .Cart { filter: invert(1); }  

I guess problem on iPhone/Safari.

@rwp You're right, they both work! I had deleted the old code which was the problem. Thanks!

Does this work?
[data-section-id="5ea10d0c31650d63e22d108a"] .slideIn { opacity: 1 !important; transform: none !important; } [data-section-id="5ea10d0c31650d63e22d108a"] .preSlide { transform: none !important; transition-property: unset !important;; }  

@rwp Thanks so much, you are a legend!!! 👍

So, we can do this, but I need to know what you want the menu to do when it becomes too long for the available space.
Do you want it to go above the logo, or do you want it to start stacking vertically on the right?

@rwp Thanks, worked perfectly!

OHHHH. I think I see the issue.
You might have put some of the CSS in the code injection block.
So delete both codes from above replace with this (code injection)
<script> window.Squarespace.onInitialize(Y, function() { $('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer'); $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').click(function() { if ($(this).nextUntil('h3').is(':hidden')) { $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').removeClass('ui-open'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed'); $(this).nextUntil('h3').slideDown(); $(this).toggleClass('ui-closed ui-open'); } else { $(this).nextUntil('h3').slideUp(); $(this).toggleClass('ui-closed ui-open'); } }); }); </script> Then add this to Design -> Custom CSS
.markdown-block p { margin-left: 1em; } .markdown-block .ui-closed:before { font-family: monospace; content: "+ "; color: #2DA9C6; } .markdown-block .ui-open:before { font-family: monospace; content: "- "; color: #2DA9C6; }  

Put this in the header code injection
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>  

Add this to custom CSS
.markdown-block { order: 5; }  

OHHHH. I think I see the issue.
You might have put some of the CSS in the code injection block.
So delete both codes from above replace with this (code injection)
<script> window.Squarespace.onInitialize(Y, function() { $('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer'); $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').click(function() { if ($(this).nextUntil('h3').is(':hidden')) { $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').removeClass('ui-open'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed'); $(this).nextUntil('h3').slideDown(); $(this).toggleClass('ui-closed ui-open'); } else { $(this).nextUntil('h3').slideUp(); $(this).toggleClass('ui-closed ui-open'); } }); }); </script> Then add this to Design -> Custom CSS
.markdown-block p { margin-left: 1em; } .markdown-block .ui-closed:before { font-family: monospace; content: "+ "; color: #2DA9C6; } .markdown-block .ui-open:before { font-family: monospace; content: "- "; color: #2DA9C6; }  

Thanks! This has been a big help.

$('h1.logo').html("<a href='/'>Jenna<br>Wortham</a>")  

$('section.ProductItem-details').html( $('section.ProductItem-additional').html() ); $('section.ProductItem-additional').html(''); This jQuery would do it, but personal accounts don't allow code injection.

$('section.ProductItem-details').html( $('section.ProductItem-additional').html() ); $('section.ProductItem-additional').html(''); This jQuery would do it, but personal accounts don't allow code injection.

You rock, man! I should be able to find the #collection for each page. thanks so much!!

@media screen and (max-width:960px) { .Index-page-content { padding-top: 120px; padding-bottom: 120px; } } @media screen and (max-width:640px) { .Index-page-content { padding-top: 60px; padding-bottom: 60px; } } This is what is causing the headings to be cut off, squarespace is shrinking the padding at a screen width of 640px
@media screen and (max-width:640px) { .Index-page-content { padding-top: 80px !important; padding-bottom: 80px !important; } } This should fix it.
@media screen and (max-width:960px) { #block-yui_3_17_2_1_1592315790530_4759 { display: none; } } There's a spacer in your blog page on mobile, that will hide it.

@rwp thank you SO MUCH, it finally worked!