Jump to content

ThomasDes

Member
  • Posts

    30
  • Joined

  • Last visited

Everything posted by ThomasDes

  1. Hello, old thread I know, but how did you achieve this design? Is it the Spotify API?
  2. Hello. Old thread, I know, but how did you achieve this with Spotify? Did you use the Spotify API?
  3. It's always been! Link to the website: https://www.clashandtoro.com/ Password: risky True, that way the audio plays without any problem. Then why could it be that my carousel code section can't find it, and throws the CORS error every time? If you open the console you'll see the errors.
  4. I made more attempts to get this to work and no luck yet. I'm using this syntax <div class="carousel-item"> <div class="image-container img-2"></div> <p>Lynn Hill</p> <div id="waveform2" class="waveform"></div> <p><a id="play-pause2" href="#" class="listen-link">Listen</a></p> <audio id="audio2" src="/s/Lynn-Hill.mp3" preload="auto"></audio> </div> And then wavesurf.js is processed in the head code injection. All of this works locally but on Squarespace the waveforms don't show up. The "/s/Lynn-Hill.mp3" is the short version of "https://www.clashandtoro.com/s/Lynn-Hill.mp3" , an audio file uplaoded on that same page.
  5. I tried adding a link to "Not linked" pages and fetching the file from there ("https://www.clashandtoro.com/s/Lynn-Hill.mp3") but that didn't work either. Still throws the CORS error. Is there a different method to do this? I'm on 7.1
  6. Hello. I'm creating an "audio snippets" section with custom code. mp3 files are processed through WaveSurfer.js to create waveforms, so neither Squarespace "Audio block", nor <audio> tags are suitable here. The files need to be accessed via Javascript. Is there any way to upload audio files that can be accessed with custom code? When trying to use links to Drive, Dropbox or Github, it throws the "‘ CORS Access-Control-Allow-Origin’ missing" error. I can provide my JS and HTML code or full console error if needed. Link to the website: https://www.clashandtoro.com/ Password: risky Thanks in advance!
  7. Hello. I realize this is an old thread, but I couldn't find a solution elsewhere. I'm trying to upload audio files and use them in custom code. It's impossible to upload them to Custom CSS and any other method gives me the CORS error. Using "https://static1.squarespace.com" etc. isn't working either. Thank you!
  8. Nevermind, I just had to adjust the screen size while editing and then the blocks are resizable again.
  9. Why does this happen? If I try to edit anything a huge space will appear below the text block and I can't remove it. The "Other Categories" block is a code block, but the paragraph is a regular text block. It's not a padding, margin or fixed height issue. It's driving me crazy. Link to the website/page: https://steerforward.com/brand-film/the-challenge-is-real 2024-06-17-14-15-20.mp4
  10. Right, it plays, but it doesn't start over once I go to another link. The A24 website gifs stop and start playing from scratch every time you go to hover over the respective heading.
  11. Hello. I'm working on a Squarespace website that tries to mimic A24's gif carousel (https://a24films.com/) with multiple headings and their respective animated gifs. When the user hover over one of the headings, its corresponding gif starts playing. I managed to make the gif stop when the mouse goes outside of the headings box, however I couldn't nail making the gif stop playing once the user hovers over another heading. I'd like the gif to keep playing indefinitely UNTIL the user hovers over a different heading or presses the arrow. I understand this is achieved by replacing the gif with another image, but couldn't get it to work like I want it to. I can provide my JS and rest of the code if you need it. Thanks in advance! Link to my website is: https://steerforward.com/home-thomas
  12. THANK YOU! I adjusted it for what I needed and ended up with this: @media only screen and (max-width: 420px) { section[data-section-id="6639022d0cfdda1b60124005"] .intrinsic-inner { padding-top: 20% } } Worked like a charm. Thanks.
  13. Hey! Old thread I know, but has someone found a way to apply the code to one blog post only, and not site-wide? If you could just let me know where to place the code or what selector to use, I can do the rest myself. Thanks!
  14. This was exactly the case. Thank you very much! Any idea as to why it seems to take about a second to load? Even though the black instead of green screen is much nicer, I wonder if I could avoid it altogether. Link to the website: https://www.tarakwaisafaris.com/
  15. Hello. I'm having this issue on an old 7.0 website, where loading the home page will sometimes show a flashing green color screen for half a second. That color is nowhere to be found across the website styles. What could be causing this issue? Any help, suggestions, or ideas are welcome. Thanks in advance!
  16. Hello! I've been trying to work out this issue with my Squarespace site for the longest time. Black space appears below a Vimeo embedded video on my page hero. It's not margin or padding, nor is the block too short to cover the full height. I've tried many different approaches with custom code but none of them seem to work. This issue is present only on mobile (below 768px). Any ideas on how I could solve this are welcome. I'll be happy to provide any additional info or code you need from me. Thanks in advance! Link to the website/page: https://steerforward.com/case-study
  17. I'd want the video to turn 90° and play on landscape mode, so the user would turn their phone sideways and the video would occupy 100% of the width of the phone, sideways.
  18. Hello. I'm using the embed block to display a video on the hero of one of my pages. On desktop it works great. On mobile the static thumbnail works just fine but, when played, the video doesn't look good. I'd want the video to turn 90° and play on landscape mode after the user clicks on "play". Is there a way to achieve this? Thanks in advance! Any feedback is welcome and appreciated. Link to the website page: https://steerforward.com/case-of-study
  19. I don't want to mark it as solution because it's a mess and there has to be a simpler way, but I fixed it with this code: .video-block .video-player{ padding-bottom:43.7% !important; } // Negative margin to the section below section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-1% !important; } @media screen and (min-width:1900px) and (max-width:18000px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-1% !important; } } @media screen and (min-width:1776px) and (max-width:1800px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-1% !important; } } @media screen and (min-width:1621px) and (max-width:1665px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-5% !important; } } @media screen and (min-width:1665px) and (max-width:1776px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-3% !important; } } @media screen and (max-width:1620px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-7.5% !important; } } @media screen and (min-width:1440px) and (max-width:1520px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-11% !important; } } @media screen and (min-width:1520px) and (max-width:1572px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-9% !important; } } @media screen and (max-width:1440px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:-12% !important; } } @media screen and (max-width:768px){ section[data-section-id="65b7c774c34932293d538290"]{ margin-top:0 !important; } }
  20. I've spent all day trying to upload a video to my website. It's a 1:1, 1080p, 30s video. When I upload it as a video block, it crops it as 16:9 and leaves two huge spaces to the sides. I tried fixing it with padding-bottom in custom CSS but it wouldn't work. I tried using a code block and embed, but none of those will work. No matter what method I use or what code I add, I can't seem to get rid of this blank space that appears between the video and the end of the section. It's not margin or padding. I've tried position:absolute - position:relative: - grid-gutter:0, height:auto - height: (760px, 810px, 1080px) - etc. Nothing worked. If you know the solution to this please let me know and any ideas are welcome. I can send you the custom CSS, or any piece of information you need. You'll see the rest of this page is a mess because it's a duplicate we aren't using. Link is https://www.theslatestudio.com/home-draft Thanks in advance!
  21. I mean inside each blog entry. It's an issue throughout the entries. For example: https://www.theslatestudio.com/slate-takes/blog-post-title-one-znlnp
  22. Hello! I'm facing an issue with vertically aligning the images on my blog post to the middle. Turns out I heavily custom coded these pages and I set the images to a max-height of 40vmax. The image is logically cut-off but the problem is that it focuses on the top and not the center of the image. I've already tried with the following: " .entry .sqs-block-image-figure .image-block-wrapper img{ object-fit: cover; object-position: center center; } " and variations, trying different classes, focusing on different nested divs but couldn't find a solution. If someone know what selector to target in order to make this work, it'll be hugely appreciated. Link to the blogs page: https://www.theslatestudio.com/slate-takes
  23. Hello. I'm facing an issue when working on the tablet / wide mobile viewport for my website. My problem is that, on certain sections with a lot of text, although no spacing is left beneath the text, a huge margin appears below the textbox and gives the section an awful look. There is no margin or padding set to the section or the elements it contains and the text is the closest it can be to the end of the section. On the link I shared if you scroll down a bit on 600px to 991px, you'll see colored sections with images above and text below and the issue will be clear. Given the mobile design didn't translate well, I decided to work with duplicate sections. So each of these sections is duplicated, the original section is set to display on desktop and mobile, and the duplicate displays only on this in-between size. I need to get rid of these margins. If anyone has ideas about how to solve this, they will be immensely appreciated. I can share my custom CSS or anything else you think could be useful. Link to the website: https://www.theslatestudio.com/the-big-picture
  24. Already solved this by placing the Menu on the Header instead of the Body. Still wouldn't know how to make it work without placing it on the Header, but for my necessities this is all I need. Thank you very much for your help!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.