GPGDesigns

@Square_Ace YOU ARE AMAZING!!! It works exactly howww we needed - so appreciate you!! Anyone that may need this - it now has been tested and works thanks to this man lol
 
 
First, add this custom CSS:
.spotify-container { position: fixed; bottom: 20px; right: 20px; height: 152px; width: ~'clamp(100px,200px,80vw)'; z-index: 100 } You can adjust the values as you wish. I've tried to make the width flexible and work across device sizes but you may need to tweak it.
Then go to your code injection footer and paste this:
<div class="spotify-container"> <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1jPEI1ZyAMuA4aLSsAxm8U?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> </div>

@Square_Ace YOU ARE AMAZING!!! It works exactly howww we needed - so appreciate you!! Anyone that may need this - it now has been tested and works thanks to this man lol
 
 
First, add this custom CSS:
.spotify-container { position: fixed; bottom: 20px; right: 20px; height: 152px; width: ~'clamp(100px,200px,80vw)'; z-index: 100 } You can adjust the values as you wish. I've tried to make the width flexible and work across device sizes but you may need to tweak it.
Then go to your code injection footer and paste this:
<div class="spotify-container"> <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1jPEI1ZyAMuA4aLSsAxm8U?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> </div>

@tori400 If you've correctly installed and configured your custom font, this code snippet should work to change the font of the buttons:
#siteWrapper.site-wrapper .sqs-block-button-element { font-family: "luminaire" !important; }  

The image looks fine to me

@tuanphan thanks for always replying with a solution!!

Try this code to Website > Website Tools > Custom CSS
body.header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; } body:not(.header--menu-open) .header-menu { opacity: 0 !important; visibility: hidden !important; }  

@tuanphan - thanks so much for this. This is definitely working for me in 7.1. Well done.

@tuanphan I'm running into the same issues with Mobile, I've read this whole thread and it's helped me so much along the way to customize my code. I'm stuck in figuring out how to fix the images from changes sizes, and when I adjust for iPad and mobile, and just doesn't seem to work correctly. 
– My concerns are keeping the tabs the same size throughout iPad and mobile
– Removing the columns for iPad and mobile and having the image move after the title service (I added a sample screenshot of my goal)
Website link:https://piccolo-antelope-5p6t.squarespace.com/
<ul class="main-box"> <li class="box active"> <span>Graphic Design</span> <div class="detail active"> <div style="display: flex;"> <div style="margin-right: 35px;"> <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/642754992c206e2593cf878a/1680299162048/Graphic_Design_Computer.png" alt="A handdrawn illustration of a computer with a smiley face with bolt eyes and a pencil on the screen" style="width: 100%; max-width: 650px;"> </div> <div class="detail_text" style="margin-left: 20px;"> <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p> <p><h1><i>Graphic</i> Design</h1></p> <p> Refine your brand with vivid, double-taking, and eye-catching creative designs. Everything from custom graphics, product packaging, website design, email campaigns, and everything in between! </p> </div> </div> </div> </li> <li class="box"> <span>Product Content</span> <div class="detail"> <div style="display: flex;"> <div style="margin-right: 20px;"> <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/642754a25294290205acc034/1680299170293/Product_Content_Light.png" alt=“Illustration of a light soft box“ style="width: 100%; max-width: 350px;"> </div> <div class="detail_text" style="margin-left: 20px;"> <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p> <p><h1><i>Product</i> Content</h1></p> <p> If you're looking for styled product shots, e-commerce images, or lifestyle shots that you can use across your website and social media channels. </p> </div> </div> </div> </li> <li class="box"> <span>Brand Identity</span> <div class="detail"> <div style="display: flex;"> <div style="margin-right: 20px;"> <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/64275a9e2c206e2593d0a612/1680300702265/Brand_Identity_Stationary.png" alt="Illustration of a branding kit stationary" style="width: 100%; max-width: 350px;"> </div> <div class="detail_text" style="margin-left: 20px;"> <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p> <p><h1><i>Brand</i> Identity</h1></p> <p> A great brand is one that looks good both online and off, I’ll work with you to create a look that is both professional and friendly. </p> </div> </div> </div> </li> </ul> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap'); body .main-box { display: flex; background: #eca587; margin: 0px auto 0px auto; padding:0; width: auto; } .box { height:500px; padding:25px; border-right: 0px solid none; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; position: relative; overflow: hidden; list-style: none; } .detail { width: 95%; height: 100%; position: absolute; right: 0; top:0; background: #eee7e3; color:#2d2d2b; opacity: 0; padding:150px; box-sizing:border-box; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; -webkit-transform: translateY(100%); transform: translateY(100%); } .box.active { width: 1000% !important; } .box.active .detail { opacity: 1; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; transform: none; } .box span { writing-mode: vertical-rl; font-size: 15px; height: 100%; display: flex; align-items: center; justify-content: center; color: #2d2d2b; text-transform: uppercase; letter-spacing: 4px; width: 10px; transform: rotate(180deg); font-weight: 800; font-famly: Myriad Pro; cursor: pointer; position: absolute; left: 0; right: 0; margin: 0 auto; } .box.active span { left:25px; right:auto; margin:0; font-weight:800 } .box p { line-height: 28px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var getslide = $('.main-box li').length - 1; var slidecal = 30/getslide+'%'; $('.box').css({"width": slidecal}); $('.box').click(function(){ $('.box').removeClass('active'); $(this).addClass('active'); }); </script> <style> li.box:nth-child(1) { background-color: #b1cec8; } li.box:nth-child(2) { background-color: #eca587; } li.box:nth-child(3) { background-color: #eeb6de; } </style>  

OK I think I have solved it myself. Here is my code if anyone needs help with this in the future:
 
.summary-item .summary-content { display: flex; place-items: center; justify-content: center; } .summary-item .summary-content { background: rgba(254,237,0,0); position: absolute; color: #fff !important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .1s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform:translate(-50%, -50%) } .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #000 !important; font-size:25px !important; text-align:center !important; background-color: rgba(3,255,255,0) !important; } .summary-item:hover .summary-content { opacity:1 !important; } a.summary-thumbnail-container.sqs-gallery-image-container:after { content: ""; background-color: rgba(254,237,0,.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after { opacity: 1; }  

Hello! I have just had to do the same thing for a website and found the solution here:
https://sirv.com/help/articles/hover-change-image/
A bit of a different approach to yours as you're putting the images into code containers rather than as a swappable block.
The <style> code must go into the advanced section of your page's settings rather than the css injection section.
And then you create a code block with the relevant image urls from your asset library (copy image address rather than the url for the image in your library) and the destination url you want to click to...
Maybe you've found a solution by now but hope this helps, if not you, someone else in future!

Add this to Home > Settings > Advanced > Code Injection > Footer
<a href="https://beaverhero.com" class="t-button">Button Text</a> and add this to Code Injection > Header
<style> .t-button { display: inline-block; background: green; color: white; padding: 1em 2em; border-top-left-radius: 10px; border-bottom-left-radius: 10px; position: fixed; top: 50%; right: 0; } </style>