Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'blocks'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers πŸ‡«πŸ‡·'s Topics
  • France Designers πŸ‡«πŸ‡·'s Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://transform.squarespace.com I've tried adding the following code to my CSS, but that doesn't seem to work: html, body { overflow-x: hidden; } To be clear, I just want the MAP block to be full-screen, nothing else. Is there a way to make this happen? Here's my staging site URL and PW: https://transform.squarespace.com/ pw - transform Thanks in advance,
  2. Site URL: http://www.eunhyeisgrace.com/human Site URL: http://www.eunhyeisgrace.com/human Hello, On this Human page, I currently have page description banner above the video. It is actually the default width size of the content block. But because it's too narrow i had to resize to stretch the video. And the code i used is; <style> .sqs-block { margin-left: -700px; margin-right: -700px; margin-top: -100px; margin-bottom: -100px; } </style> BUT the thing is, the width of the page description is still same, only the width of the video size is changed. I would like to reduce the margin on the page description to make the same width of the video . Would really appreciate some help with this.
  3. Site URL: https://www.interaction-ld.com/coaching_new I am trying to add custom code to a specific page and specific blocks of 'lines' and 'text' so that they are the same height and look in line. I found some code on another thread that I thought might be something to start from, but am unsure how to edit it for my page as it relates more to image blocks. I also wondered if I just needed to add the 'flex' element. I want to be able to have the items in any order and always be the same height. It's also possible that I will wart to target these same blocks with other custom code such as colours, text size, background colours etc, so it would be great if someone can help with how to target each element separately so I can do this. The page is here: https://www.interaction-ld.com/coaching_new Password: coaching The blocks are the pink lines and the text underneath. Thanks very much. Laura
  4. Site URL: https://cafesoelle.squarespace.com Hey guys, Thanks for being an incredible community! Created a simple little site for a local coffee bar pro bono during these weird times, anyway, site is looking fine on web/mac, but things are looking a bit weird on mobile: 1. logo is gone on mobile? 2. the order of the blocks are off, should be like this: please see "block_order.png" 3. the blocks are wrapping the text weirdly, please see "text_wrap_1.png" (mobile) vs "text_wrap_2" (how it should look) That's it. Hoping that some of you guys might be able to help me out. Thanks so much and have an awesome day! πŸ™‚ Best, Mads
  5. Site URL: https://www.renostud.io/be-a-designer My url is https://www.renostud.io/how-it-works. On mobile its image text text image text. Can you give me code so its image text image text image text? tks.
  6. Site URL: https://www.ajollyconsulting.co.uk/risk-consulting I've added a drop shadow to an image which worked great: https://www.ajollyconsulting.co.uk/visa-global-acquirer-risk-standard I wanted to add to other images on the site (but not all), but when I added the other block to the CSS it started behaving oddly by adding a white margin to the left of the second block. The page with the second block that won't play ball is: https://www.ajollyconsulting.co.uk/risk-consulting (CSS since removed as it's live) I used: #block-cb70d638ae2ff944299b, #block-yui_3_17_2_1_1619789644452_40023 .image-block-outer-wrapper { box-shadow: -10px 10px @ajcteal !important;} and also tried: #block-cb70d638ae2ff944299b, #block-yui_3_17_2_1_1619789644452_40023 {.image-block-outer-wrapper { box-shadow: -10px 10px @ajcteal !important;}} I also tried repeating the CSS and having them both separate but nothing worked. I've since discovered that, even if I delete the CSS for the first - working - one, this second one still displays oddly. So am now realising it wasn't me not getting the code right when adding multiple blocks, but something specific to that second block. I can see when inspecting the page that there is a margin applied: .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic { margin: auto;} BUT I can't seem to target it away!
  7. Site URL: https://foodisterie.squarespace.com/la-foodisterie-1 Hello Circle ! I hope you are all doing well! I would need some help on this page, in fact I managed to make a split section with the two first sections. However the section goes under the header on some screen the first lines of text disappear under it and I can't find a way to place the sections just under the header and not at the top of the screen. I thought of adding a padding at the top, but on each size of screen the padding need is different so I'm out of options! https://foodisterie.squarespace.com/la-foodisterie-1 password: Maureen Here is the CSS I used : #collection-608e75d5e343ac7a934afa70{ .page-section{height:100vh!important} .page-section:nth-child(2) {margin-top:-100vh!important;} .page-section:nth-child(2) , .page-section:nth-child(2) .section-background{background-color:#fff!important} [data-section-id="608e75d5e343ac7a934afa72"]{ width:50%; }} [data-section-id="608e75d5e343ac7a934afa74"]{ width:50%; margin-left:50vw; } If anyone has an idea to change that, I would appreciate! Thanks for your help, Maiixu
  8. Site URL: https://arsene.studio/en/home-1 Hi, If I put a first section that do not have a background image/video, the header stays above. Ho can I force it to be on top of the first section? Thank you ! Leo
  9. Hi, I am trying to change the text color inside a block on one of my website pages using the block ID and custom css. All the text is one of the paragraph types and the code will change some of the paragraphs, but not others. I'm perplexed - this should be so easy. The first two blocks listed are the same - it's the green box on the right. The last block is the orange box on the right. I want to change all the text inside these boxes to purple, but as you can see, it only changes some of the text. Any ideas of what I'm doing wrong? #block-yui_3_17_2_1_1619538852743_12055 p{ color: #7014AD !important; } #block-yui_3_17_2_1_1619538852743_12055{ background-image: url("https://static1.squarespace.com/static/5ea1cbf0cfddce1d056fb528/t/608831f357928014017f7bc5/1619538420373/greenWoodBG.png"); } #block-yui_3_17_2_1_1607550448326_11796 p{ color: purple; }
  10. In the recent updates, the Code Block has recieved an UI update to match the new design of other block such as Summary block, but bad thing is the width size is shrinked down and make it hard to look/edit, so this snippet may help you to increase the width size of code editor block Add it into Settings->Advance->Code Injection <script> if ( window.location !== window.parent.location ) { window.parent.document.querySelector("head").insertAdjacentHTML("beforeend", '<style>[data-test="block-editor-container"] { width: 620px !important; }</style>') } </script>
  11. Site URL: https://meck.com.au/mission Hi there, I've got a series of images where my text is alternating on the left and right of the image. I have duplicated some of these blocks and shown them only in mobile view so that when scrolling in mobile view the text appears before the image. However, a blank space has been added each time a block is hidden, and the same goes for the desktop view where blocks have been hidden. Thanks in advance! The page I'm working on is https://meck.com.au/mission
  12. Hi. I'm looking to edit the "Back to All Events" link that displays at the top left when viewing an individual event on an Events Page. I've found a CSS version for the earlier versions of squarespace but they don't work for the v7.1.
  13. Site URL: https://www.longitudepr.com/results Hello, I know this question has been asked and answered before but I have tried and tried to find a solution for stacking the images on mobile correctly. Would anyone mind delivering the css? Results page needs to stack Image 1 Image 2 Image 4 Image 3 Image 5 image 6 image 8 image 7. Thank you so much!
  14. Site URL: https://guppy-bellflower-73kd.squarespace.com/bookme Hi there, password to enter the site is "bubba". I have a small question. On the "Book Appointment" page of this site, I have a Javascript code block with an embedded HTML snippet. I would like the gold "Book Session" button to sit directly in the center of that page and not all the day at the bottom, the way it does right now. Also, after clicking on "Book Session", the box that appears then wants to hide under the fixed header if I scroll down. How do I make it so that it doesn't do that? Will I have to change elements of the HTML snippet itself or will I have to go into Custom CSS? Thanks!
  15. Site URL: https://www.teloshealthandwellnessservices.com Can someone help me find an easy fix to keep the same text on a poster picture but prevent the text from spilling into other pictures on the mobile device? Can it be done in canva and still allow for the amount of text? Only suggestions were to reduce text or reduce font size. Thanks, MJ
  16. I'm not sure if this has been asked before, but I couldn't find it on the forum. I am trying to put 5x image blocks next to each other, but I've noticed that any time I've tried to add 5 blocks (of anything) in a row on Squarespace 7.1, it becomes uneven. Obviously if it is an even number of blocks it seems to work fine (e.g. 6 image blocks in a row works okay) but if it is an even number of blocks that is 5 or more, it doesn't work. Does anyone know a workaround for this? I don't want to use galleries or summaries because I want a detailed caption under the images, and I know this is difficult with SS7.1
  17. Site URL: http://www.foxandvamp.squarespace.com Hi All Trying to swap the order of blocks on mobile Tried various codes from the forum but no luck. Please can someone talk me through the process as there's a few instances where I want to swap these round. Thanks PW: london88
  18. Site URL: https://ray-harmonica-ta62.squarespace.com/produkter Hello! I created a site using an online store template. My site is going to show products, but only in a list on a page, I don't want them to be clicked. I don't know how to make the items in the online store module to not be clickable, and to have more text, so I added a section called Pricing with 3 collumns of image, text and price underneath. This is all I want, except I want the three collunmns to be full width like the store-module. See screenshot. Help please? Thanks!
  19. Site URL: https://farfromhomepodcast.org/ I have a social links block on my website's homepage, and I'd like to add a link to my Clubhouse club, but Squarespace unfortunately doesn't yet included Clubhouse in its list of social media icons that can appear in a social link block. So I instead manually created an image block with a Clubhouse icon that was the same size and placed it directly next to the other links. It looks great when I view my website on my computer, but it looks like a mistake on mobile devices, since the image block automatically gets moved to the next line. I've attached a screen grab from my iPhone so you can see what I'm seeing on my end. Can anyone please advise me on some custom code I can insert to ensure that the image block remains stacked to the right of the social link block, even on mobile devices? Thanks, Scott
  20. Site URL: https://lemon-cranberry-x99z.squarespace.com/sequence-photography-moving-the-weasel In desktop view, I have an embedded video displayed text wrapped in my text. I would like to keep this text wrapped look when in desktop view, however, when in mobile view, I would like the embedded video to display after the text. I would like to keep how it looks with the text wrapping in desktop view, but have the video appear after the text just in mobile view. Is there code that can do that to put in Custom CSS? I think it's kind of similar to this: (My website is not published yet.)
  21. Site URL: https://www.prochemicalstore.com/om-oss Hi, I need to decrease the space between the headline of the image and the body text. (the gap btw "Vad vi gΓΆr" and "Representerar..." on attached image. I'm thinking of two methods: 1. Use HTML in a code block. But then I need to know the path to the image. Is there a way to get that information? (the support guy didn't know) 2. Customize it by CSS. Is there another way? Many thanks!
  22. I am currently working on a redesign for my client in Squarespace, 7.1 is terrible I have to constantly duplicate the site since it's a larger build and then rework the CSS because the ID's of all my blocks change. Does anyone have a solution for this? I wish I never would have gone into 7.1 for this build and stuck with 7.0. I'm upset that developers seem to be unsupported with this updated version.
  23. Site URL: https://www.threadapeutic.com/home Hi, I'd like to edit this particular image block of my ecommerce gallery, currently shown as a single column but would like a double column grid on mobile (see screenshot). I'm completely clueless on the code structure other than finding the block id. Please help. Thanks!
  24. Site URL: http://carissatrianty.com Hi there, I'm working to edit text captions within inline-formatted image block. I put the text on "Overlay on Hover". The texts are already there (I put them in a while ago). I just needed to edit them, but when I hovered over the image and the text pops up, it didn't allow me to edit it. The cursor barely changes to editing cursor and remains on "Grabbing" one. I've been trying to deal with this for the whole day now and found nothing as a solution it's so frustrating. I did inject a code but it was only to style the overlay. Mind you that I put the images together not on a Gallery spec but as individual image blocks all put together. And last time I checked, my version is on Squarespace 7.0. Also, the edit image window seems to be more simplified than last time. The last window was so much bigger and offered many options, but this one was a lot smaller with only limited functions. Is this part of Squarespace changes? Is there a broken code? I just needed to edit the caption. Any help would be Kindly appreciated. Thanks so much!
  25. Site URL: https://anxioussound.com/aoty-2020-2 Hello, I'm using the Foster template in V7. I have a page with two columns: 25% 75% The left column contains a div I would like to make sticky (sticks to the top of the browser window on scroll). Here is the HTML: <div class="aoty-yr-container"> <div class="aoty-yr sticky"> <h1> 2020 </h1> <h2> The past is full of dead men / The future is a cruelty </h2> <p> Protomartyr </p> </div> </div> Here is the CSS: .aoty-yr-container { overflow: visible!important; background: pink; height: 2000px; } .aoty-yr { height: auto; } .aoty-yr h2 { padding-top: 40px!important; height: auto; } .sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background: wheat; } Two issues here: 1. I need the left column β€” .aoty-yr-container (pink background) β€” to be the same height as the column on the right (the 2000px height was an arbitrary choice to make sure the sticky element's parent container had a height value). How can I achieve this? 2. I've been unable to get the .sticky element to work β€” .aoty-yr sticky (wheat background). Any assistance would be greatly appreciated. Note: Eventually, this page will become one of several within an index, each with a similar code block that will stick depending on scroll position. Thanks in advance!
  • Create New...