Jump to content

ThomasDes

Member
 View Profile  See their activity

  • Posts

    23

  • Joined

  • Last visited

 Content Type 

Everything posted by ThomasDes

  1. ThomasDes
    Nevermind, I just had to adjust the screen size while editing and then the blocks are resizable again.
  2. ThomasDes
    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
  3. ThomasDes
    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.
  4. ThomasDes
    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
  5. ThomasDes
    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.
  6. ThomasDes
    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!
  7. ThomasDes
    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/
  8. ThomasDes
    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!
  9. ThomasDes
    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
  10. ThomasDes
    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.
  11. ThomasDes
    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
  12. ThomasDes
    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; } }
  13. ThomasDes
    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!
  14. ThomasDes
    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
  15. ThomasDes
    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
  16. ThomasDes
    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
  17. ThomasDes
    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!
  18. ThomasDes
  19. ThomasDes
    I am facing a very particular issue with a custom coded hamburger menu I introduced to my website. When the navbar is displayed, certain elements seem to overlap it, staying in the front and obstructing the readability. These elements vary from texts, code, images and so. This is the link to the page: https://semicircle-cone-e395.squarespace.com/contact (this link leads you to one of the pages where the problem is very clear, given one textbox overlaps and the other doesn't). If someone is able to help me with this I'll be extremely grateful. I know it's a very specific issue but I thought someone with more experience and knowledge could look into it and help me out. If you need any of the code, either the navbar or the custom CSS, let me know and I'll send it immediately. The website doesn't have code injection. Thanks in advance!
  20. ThomasDes
    Hello. If the issue persists remember to change your section from grid with margins to grid without margins. This will get rid of any leftover white space. Do this together with the code lines other users provided and you won't have this issue.
  21. ThomasDes
    Thank you for you reply. I don't think that'd solve the issue, since it also affects the footer. If you know of any free alternatives, let me know. The code is: .header{ padding: 2rem 2rem 0 2rem; } .header-nav, .header-actions { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; }
  22. ThomasDes
    Hello, I've been working on this site lately. Due my client's necessities I used a decent amount of custom code. There are a few lines in Custom CSS, a few on each page custom code and some code blocks across the pages. There is no code injection and there is no Javascript used, at all. I'm attempting to use a hamburger menu that shows on desktop, with code that I got from another forum. The icon is displayed but doesn't work when pressed. Same thing with the footer, on the editor it features a navbar and a button, however when viewing live the button disappears. When using safe mode everything works just fine. I tried removing each block of code across the website and adding it back and I can't seem to find the issue. If somebody has a solution to this problem I'd be extremely grateful. I can facilitate the custom css code or the code used on each block if needed. Site URL is: https://semicircle-cone-e395.squarespace.com/
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources