cro0w

Definitely try ChatGTP to get the right code, it does wonders if you give it all the information. I have gotten my sites to look how I want without relying on a programmer AND I've increased my skills in coding cus ChatGTP is fast and nice in explaining things. 

Hi. Which SS version do you use? Can you share link to your site?

Definitely try ChatGTP to get the right code, it does wonders if you give it all the information. I have gotten my sites to look how I want without relying on a programmer AND I've increased my skills in coding cus ChatGTP is fast and nice in explaining things. 

Well, this makes Squarespace only  useable in a legal way for programmers..
So your very first statement on your website is a lie..
PLEASE FIX IT ASAP!!
Create your website
Easy-to-edit website templates, no coding needed

Once again this forum proves to no be super helpful for me, I've posted many times I never get help and come back to figure it out. For those of you with the same problem that Squarespaces causes when using YouTube Embeds on their site, specifically with loading them on the video library for Squarespace 7.1.
I assume they do this cus they want you to upload your own videos and then have to pay them more, ridiculous! 
Here's all the codes to fix what I needed from my original post. You can clean up anything else. 
/* Recommended Thumbnails */ .lessons-item-related-wrapper .lessons-item-related-item-list .related-item .related-item-link-thumbnail { height: auto; } .lessons-item-related-wrapper .lessons-item-related-item-list .related-item img.related-item-thumbnail { border-radius: 15px; aspect-ratio: 16/9 !important; } /* Hover mode */ .lesson-item .related-item { transition: transform 0.3s ease-out; /* Initial transition for smoother return */ } .lesson-item .related-item:hover { transform: translateY(-10px); transition: transform 0.3s ease-in-out; /* Transition on hover with ease-in-out for smooth effect */ } /* Summary Thumbnails */ .sqs-block-summary-v2 .summary-thumbnail-container img.loaded { border-radius: 15px; aspect-ratio: 16/9; object-fit: cover; } /* Video Library Thumbnails */ .lessons.collection-content-wrapper .grid-image-wrapper { padding-bottom: 56.25%; } .grid-image { border-radius: 15px; } I hope this helps someone else get rid of the black bars on YouTube thumbnails. 

Why are people gate keeping something so simple? Tumblr has been doing this forever. What's going on Squarespace come oooooooooon.

Add this code under. If it doesn't work, please share site url, we can help easier
@media screen and (max-width:991px) { header#header img { visibility: hidden; } }  

@paul2009 @creedon
Hello, 
I'm hoping someone can guide me through. I've been reading multiple threads now and I can't seem to find anyone nailing down a solution. Here's the status.
 
I have 7.1 and Business Plan.  We loaded 4 price variants. I wanted to show a range of prices from low to highest on the PLP, instead of only showing "from cheapest variant". I used this code on the header:
  <script> /* This is the code overides prices variants in product pages */ document.addEventListener("DOMContentLoaded", function() { var productVariants = document.querySelectorAll(".product-variants")[0].dataset.variants; productVariants = JSON.parse(productVariants); var lowestPrice = Infinity; var highestPrice = 0; for (var i = 0; i < productVariants.length; i++) { var variantPrice = parseFloat(productVariants[i].price) / 100; if (variantPrice < lowestPrice) { lowestPrice = variantPrice; } if (variantPrice > highestPrice) { highestPrice = variantPrice; } } var priceContainer = document.querySelector(".product-price"); priceContainer.innerHTML = "$" + lowestPrice.toFixed(2) + " - $" + highestPrice.toFixed(2); }); </script>  
It worked. Here's the result:


I want to do the same in the Store Page. I was able to figure out a code that targets the right element, but it doesn't show any prices and it only affects the first product on the grid. Here's the code i used on the footer:

 
<script> if (window.location.pathname === '/shop') { var priceContainers = document.getElementsByClassName("grid-prices"); var lowestPrice = Infinity; var highestPrice = 0; for (var i = 0; i < priceContainers.length; i++) { var priceText = priceContainers[i].querySelector(".product-price").textContent.trim(); var price = parseFloat(priceText.substring(5)); if (price < lowestPrice) { lowestPrice = price; } if (price > highestPrice) { highestPrice = price; } } var priceRangeContainer = document.querySelectorAll(".product-price"); for (var i = 0; i < priceRangeContainer.length; i++) { priceRangeContainer[i].innerHTML = "$" + lowestPrice.toFixed(2) + " - $" + highestPrice.toFixed(2); } } </script>  
Here's the result:


What I'm thinking is that from the Store Page, it doesn't know what the min and max price variant is, unlike the PLP. How can I scrap the data and then loop it back but in the Store Page. 
How do I target all the elements on the grid?
Is it possible to achieve the same result I got on the PLP? 
 
Thank you in advance for taking the time to read. I'm not a programmer by any means nor do I feel comfortable with code, Chat GTP helped me figure most of it out. Which is amazing to me. 

Here's the link to the website: https://chathamcompassion.com/shop 
(It's a 420 shop I'm working for a client)