JayVanDyke

Seems ok to me at the moment but sometimes those images get hard coded numbers generated by a script when they load. Maybe this will work? This will probably break your focal points if you've got those set on your images anything other than center but it should make them be sure to fill the container.

@media only screen and (max-width: 640px) {
  .sqs-gallery-design-carousel .summary-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

@bbradley can you share the link?

It's probably code somewhere else hidden on the page but I guess it's possible it's just squarespace. Is it every single page? Is it even if you make a brand new page? I've had to find these things before for clients if you want to DM we can chat about some help. I would just need to get access to your client's site as an admin.

I might try combining this with the id that the footer already has of #footer-sections and change the display of Will's button to be your call button.

https://www.will-myers.com/articles/building-a-back-to-top-button-in-squarespace

maybe check this out? 

https://www.adlyticmarketing.com/blog/squarespace-scrolling-marquee-announcement-bar

Also you could add a marquee to a footer section or something and we can move it to the announcement bar with some javascript. That might be an easier solution so you don't have to edit all that code. If you do that just share your link here and one of us can probably help write it for you.

@renee.hartwick
have you tried using safe mode? in the editor after "/config/" put "safe" so it should look like this

yourinternalurl.squarespace.com/config/safe

the other thing I would try is to get rid of literally all of the css and paste it into a plain text editor to save for just a moment to see if that's it. It looks to me like someone has manipulated the size of an element inside of a fluid engine container. I've had things look like this on sites where I had to adjust the sizing for portrait style video and it kind of breaks the editor a bit when you're working on that section. If it's happening in all of them I wonder if there's some generic css that's affecting the whole site. I've had to do this a few times, it's such a nightmare finding the issue.

@ColeH_design can you share a link to your site?

@CharlotteWilderness you probably need to make your CSS more generic if its at all possible. For things like this I usually use classes from the color schemes, sometimes attribute selectors looking for specific section heights or widths or even nth-child type selectors. It might be worth purchasing someone else's template just to see how that all works!

maybe this would do it?

.course-list__list-chapter-item-chapter-meta span:first-child {
  display: none !important;
}

there is another post that looks like it's been pretty much solved for a few different scenarios. 
 

can you share a link to your page? if its not live yet you can add a site wide password for us to check it out

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords?platform=v6&websiteId=652d684da0a529056ac2ab69

@EvanMad This is still happening? It's probably an issue then with the code snippet you're using. Can you post that here?

@EvanMad this is due to the arrangement of your blocks on mobile. You seem to have another code block overlaying the iframe that is stopping you from clicking through. In your mobile editor use the block settings to send it all the way to the back and see if that helps. Or just resize that block only in mobile mode to be really small and not on top of the other code block.

You might need to rethink your design but this plugin could work. Uses a list section and then autoplays videos hosted on Vimeo or YouTube I believe. https://squarerefresh.com/plugins/autoplay-video-hover. Aside from that maybe your rollover image could be a gif?

@KevinWalton so you shouldnt need the javascript to do anything here.

This css should work. You already have this

header {
  mix-blend-mode: difference;
}

but change it to what @tuanphanwas saying above.

body:not(.header--menu-open) header {
  mix-blend-mode: difference;
}

@KevinWalton I only see mix-blend-mode attached to that custom mouse cursor, is that right? It doesn't look like it's attached to the header. If you've disabled your code can you put it back?

@RArchitects if it's totally full bleed you will likely end up with some cropping of your video or some of it outside the viewing area. You can achieve this also with a background video and some plugins to add in the play and pause buttons. This background video controls plugin will do that (affiliate link) https://transactions.sendowl.com/stores/9487/193949

@KevinWalton can you share a link to your page?

@stephan_bazbaz you need to surround it with quotes like this

 grid-area: ~"8 / 12 / 12 / 22" !important;

these need to be escaped...

@ibsellar1 there is not a way to do this without a plugin but it sort of depends on how your site is put together. Can you share a link to your site?

@shanagann awesome! Go ahead and mark it as the solution then so someone else can find it. 

@shanagann I think if you go into the plugin code and remove this part

replace(",","")

see if this edited version works

<!-- Reformat Product Price (15,000.00 -> 15000) -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script src="https://cdn.jsdelivr.net/npm/@ryanmorr/ready@1.4.0/dist/ready.umd.js"></script>
<script>!function(){function reformatPrice(price){var priceClone=price.cloneNode(!0);function reformat(){priceClone.innerHTML=price.innerHTML;var target=priceClone.querySelector(".sqs-money-native")||priceClone,textNode=priceClone.querySelector(".sqs-money-native");target.textContent.length>1?target.textContent=format(target.textContent):textNode&&(textNode.textContent=format(textNode.textContent))}function format(text){return text.replace(/\.\d{2}/,"")}function watch(){var observer;new MutationObserver(reformat).observe(price,{childList:!0})}priceClone.classList.add("product-price-clone"),price.parentNode.insertBefore(priceClone,price.nextElementSibling),price.style.display="none",reformat(),watch()}ready(".product-price:not(.product-price-clone),.original-price:not(.product-price-clone)",reformatPrice)}();</script>
<!-- end Reformat Product Price -->

You have the wrong comment type. It should look like this

<!-- Accordion Page Settings -->

The code is totally complete on their codepen but I don't think it'll just work out of the box in a code block, which is why if you share your page link we can see what parts aren't working or in the worst case (which has happened before) it was copied and pasted missing something like a quotation mark, bracket, semicolon, etc.

Typically in these forums many of us have an easier time looking at your specific problem if we're looking at what you're talking about live on your site. The other reason this is helpful for us is that I would probably just have to make my own page and install this person's code to try it out which ends up being more work for helpers in the community.

@mindofalexander 

Your pagination title question

1. add a code block anywhere on the portfolio item page

2. copy one of these snippets into it and adjust the title as needed. If both links on that page need to be changed then you'll need both of these code snippets below.

<style>
  /*for right side pagination link*/
.item-pagination-link--next .item-pagination-title {
    font-size: 0 !important;

    &:after {
        content: 'new title name here';
        font-size: 20px; /*from your code*/
        font-family: var(--portfolio-item-pagination-font-font-family);
        font-style: var(--portfolio-item-pagination-font-font-style);
        font-weight: var(--portfolio-item-pagination-font-font-weight);
        letter-spacing: var(--portfolio-item-pagination-font-letter-spacing);
        text-transform: var(--portfolio-item-pagination-font-text-transform);

    }
}

</style>

<style>
/*for left side pagination link*/
.item-pagination-link--prev .item-pagination-title {
    font-size: 0 !important;

    &:after {
        content: 'new title name here';
        font-size: 20px; /*from your code*/
        font-family: var(--portfolio-item-pagination-font-font-family);
        font-style: var(--portfolio-item-pagination-font-font-style);
        font-weight: var(--portfolio-item-pagination-font-font-weight);
        letter-spacing: var(--portfolio-item-pagination-font-letter-spacing);
        text-transform: var(--portfolio-item-pagination-font-text-transform);

    }
}

  
</style>

Your alignment question:

You have custom CSS added to your page that is this..

If you want the links to not push over to the right or left you will need to remove this. The reason those links are pushing over to the side is because your code doesn't allow the words to wrap so instead they keep stretching to the side past where your page content ends. You can play with font sizes to achieve the same goal but that might be kind of a pain.

Adding links in places they don't exist question:

The short answer is this isn't something that is super simple to do and I don't know of an existing plugin that will achieve this. You will need to either learn to write or hire someone who can write you a script to add this to the pages that need it.