Squarespace remove top padding It wants to always hold its exact ratio, so it appears that the top and bottom have large padding, which is what I don't want. 3k Squarespace Webinars. Any ideas? I'm a new squarespace user and unfamiliar with custom css but will go down that road if needed Dec 27, 2022 · If you only want to remove the padding from certain pages or sections, you can use the Page or Section ID to Target those specific areas. I've tried everything i can think of with no avail. Nov 2, 2024 · Hi @stinejensen123, then you can add this code and play around with the padding, etc, let me known how it goes:) /* Adjusts spacing for the title in the user items list */ . How do I reduce/remove the spacing above and below it? I'll attach a screenshot. Feb 19, 2021 · I've used custom css to remove the middle and bottom footer blocks already but can't seem to get any code to remove the extra padding underneath the remaining top Apr 25, 2022 · ⭐ Squarespace Circle Leader ⭐ Squarespace Expert ⭐ Platinum Partner ⭐ Software Engineer ⭐ UX Designer ⭐ Design should be simple. gallery-fullscreen-slideshow[data-width="full"] { padding-top: 0px; padding-bottom: 0px; } This will apply to all slideshows of this type. Dec 12, 2024 · Hi, I'm trying to remove the gap below the header and image blocks for this one page on mobile. Oct 14, 2019 · I am using Squarespace 7. I've contacted SS help meanwhile and they told me it's a structural SS problem and they are dealing with it. Feb 15. Could somebody please help? Feb 23, 2025 · Oh boy! I figured it out! . However, we can cancel or remove the account. gallery-grid[data-width="inset"] { max-width: 1920px; padding: 1vw 4vw 1vw 4vw; margin-left: auto; margin-right: auto;} Nov 30, 2023 · Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS. I have attached an example of the space I want decreased. There's still a small border at the top and bottom of the section. Dec 3, 2024 · The embedded form has a 40px padding around all edges that I can't remove. Jan 16, 2024 · Add this code to Custom CSS box div. Thanks in advance. Jun 11. I'm having a similar issue with my fluid engine test site, except the padding is both top and bottom. gallery-block { padding-bottom: 0; } # collection-5f8009dc24abb73cd090d44a . Oct 26, 2022 · This is driving me coconuts. Website: shuifeng. Please see the blue align above the attached text. I was able to make it full width with custom CSS however I want to remove the padding on top and bottom and it's limited with Squarespace's settings. Head to the section that you want to remove grid padding from and select edit section. header-announcement-bar-wrapper { padding-top: 0px !important; } Jan 7, 2025 · Go to your Squarespace Editor Click on the Gallery Section Click Edit Section → Look for Padding Controls Set Top & Bottom Padding to 0 If you still see space, add this CSS in Design → Custom CSS: . 1 and this is a page within a project grid. squarespace. Stand out online with the help of an experienced designer or developer. atmos. com. See image - the top is the thumbnails displayed at the bottom of my slideshow, then a huge gap until the next section which is text. Apr 13, 2020 · Add to Design > Custom CSS > Then save & reload the site /* Mobile slide padding */ @media screen and (max-width:767px) { . I copy pasted the code that you all suggested but it doesn't seem to be working. However, we can cancel or remove the site. url and pwd below. collection-content-wrapper { padding-top: 0; padding-bottom: 0; } . Feb 16. There is a similar gap at the top of the slideshow above the main image. Oct 23, 2020 · You can remove it by adding the following CSS from Design > Custom CSS: . Intro, . Any help would be greatly appreciated! 🙂 Jul 23, 2022 · I am using the below CSS for the top: . Jul 16, 2020 · I have already added code but there is still this spacing that I would like to remove. You can do this by adding a bit of code to your Custom CSS Editor. 1, portfolio page style is hover: fixed. Nov 11, 2020 · Hello, how do I remove/reduce this padding on the portfolio page? I've tried adding couple of different Custom CSS coding suggestions but none have worked. Increasing header padding can enhance your website’s aesthetics and provide a more professional appearance. healthyhi Feb 15, 2024 · Hi @tuanphan, . In the browser inspector, I can see that there's a calculation being run for the top and bottom padding: padding-top: calc(1vmax / 10); padding-bottom: calc(1vmax / 10); Mar 23, 2014 · Captions and space between image and text. I've tried the following code via Design > Custom CSS and nothing seems to change when I save it: . gallery-grid--layout-grid { padding-top: 0px; padding-bottom: 0px; } Jul 25, 2021 · if you wanted to remove those too, then add top and bottom padding inside your existing css for the sections content wrapper for data-section-id="60e9829ec4c1a734c5d9c0cb" padding-top: 0px !important; padding-bottom: 0px !important; Hope that helps, let me know if it works Dec 25, 2024 · Ah sorry, I havnt taken a package yet so the site isnt public yet. #footer-sections . See screenshots. I have tried adding the following css code but it does not seem to work: @media screen and (max-width:640px) {. Feb 15, 2023 · I am looking to add a border and remove any padding from the multiple slideshow galleries that I have on this page: margin-top: -2px;} Squarespace Webinars. squar Jun 10, 2021 · I am basically building a landing page and had to remove both header and navigation bar as well as footer. gallery-slideshow { height: 30vh !important; } } Jun 13, 2021 · Hello @tuanphan. product-layout-side-by-side {padding-top: 2vw!important;} Hope this helps!-Tyler Edited April 14, 2022 by tcp13 Jul 25, 2023 · Ah also I meant I wanted to remove all padding - top, bottom, right and left. Jul 20, 2020 · For each new page or section I create within my site index, there's a built-in padding or margin at the top and bottom that runs the width of the screen. I would like to be able to only effect the top and bottom padding Jan 4, 2022 · Thanks for responding. Mar 28, 2022 · Hi, add this to custom css (Design > Custom CSS). On the home page I want to reduce the amount of vertical white space between the header and the gallery section slideshow by about 40-50%. Main { padding-top: 0px; } Jan 2, 2025 · Create an account or sign in to comment. content-wrapper { padding-top:0!important; padding-left:0!important; padding-right:0!important; overflow-x:hidden; max-width: 100%!important;} https://turtle-seadragon-7bz3. Are you able to tell me idc there is any code I can input to just turn off padding on all video in general? May 6, 2020 · Hi, I'm having trouble removing the padding from one of my video blocks. The top "image" is the video in these screenshots. Desktop is fine, however, I am wanting custom css to remove the extra padding on the top bar for mobile view. I tried to make the padding around the horizontal line smaller, but for some reason it only takes the padding away from the top of the line. 1 By clementinedesignstudio , June 2, 2022 in Site Design & Styles Followers 2 Mar 24, 2020 · am also trying to remove extra grey space between the sections and footer across my site, have tried to minimize the footer padding at top, but doesn't seem to be working only enlarging the space. where sections join other sections. user-items-list . For example, if you want to remove the padding from the home page, you would add the following code: #home-page-wrapper { padding: 0 !important; } You can also use negative margins to achieve a similar effect. # page section . The shapes stretch to the width of the footer but there is a white section at the bottom that I can't cover with the black box. /* begin reduce padding between gallery and following text block */ # collection-5f8009dc24abb73cd090d44a . I'd like to remove this space. Edited August 6, 2022 by sfphotogirl adding info Oct 29, 2024 · Hey @Farside99, you can use the below CSS to remove padding. I tried targeting the social block ID but that didn't work. So moving the whole section up?? Thanks again for your help, Jack Edited November 10, 2022 by JackJohns Nov 17, 2022 · Hello everyone! I have been using a carousel without any pictures to display testimonials, but I've run into an issue with large spaces above and below the carousel gallery section. header-announcement-bar-wrapper { padding-top: 0px !important; } Jul 14, 2021 · padding: 0px !important; margin: 0px auto; display: contents;}} #player { padding-bottom: 0px !important; padding-top: 0px !important;} It's an issue because the section below it is a different color so it stands out. content-wrapper {padding-top: 0px!important;} And to remove the additional padding on the shop and product pages, add this code: . Please see photos. I imagine I'm not the only one thinking there is too much white space as a default and I can't find a way to remove it. Thanks in advance for any help you can provide. Jun 19, 2022 · Add to Design > Custom CSS /* Reels top padding */ [data-section-id="62ae7e50e1c07056a27f2b7c"] { padding-top: 0px !important; } Oct 9, 2019 · Index-page-content {padding-top: 20px; padding-bottom: 20px;} Insert that via the CSS Editor and adjust to your liking. header-announcement-bar-wrapper { padding-right: 30px !important; padding-left: 30px !impor Dec 5, 2020 · How to remove the gap between the top of the page and the sticky header on Brine/Foster? . I've used this code to get the image block padding this tight, but I can't find code that'll close the sid Jan 26, 2021 · Hire a Designer. Here is a link to the site for referencePassword: weddings This is the code I currently tried t Apr 10, 2022 · I'm trying to remove the top and bottom padding on the new scrolling block. Thanks in advance for the help! Sep 14, 2022 · Hi, Add this code to Design > Custom CSS div. Thank you Jan 7, 2025 · Site URL: https://www. Top (1vw) - Right (4vw) - Bottom (1vw) - Left (1vw). Log into your Squarespace account. On 7. And just so you are away the padding figures go from top > right > bottom > left. Jul 23, 2024 · For instance, at the top of a web page, you might have a logo with padding being the space between the logo and the margin or border of the header. I would like to remove this space for all native videos that I add to the site. Did Squarespace remove the vertical Dec 22, 2020 · Add this to Design->Custom CSS . sections To add in customs CSS. sqs-block-html { margin-left: 1em; padding-top: 0. com Jun 17, 2020 · Awesome! Thank you so much bangank36. Basically, when a page has not so much content it appears a blank space (if you have a coloured background, if it's white you don't even notice). Is there a way to remove the extra padding in the text box (below "photography") so that I can get this thing to space correctly across devices? (ignore the marquee / scroller image in this question. Jan 4, 2022 · After so much tweaking for the life of me I am unable to remove the space between my nav menu and my video block. . com and the password is: Testing. thanks!! May 8, 2020 · Site URL: https://bluebird-porcupine-yzdg. p: Tractorbeverages to get into site Nov 9, 2022 · The grid gallery code, just pushes it to full bleed, and on second review, it does this with the masonry gallery too. This will remove padding at the top of every page. Note that you have a couple spacer blocks at the top of that section that you'll want to remove if you really want to close that gap. Squarespace is the all-in-one solution for Jul 26, 2024 · Hi, I have added CSS code for a 'Simple List' section, which moves the text to the side of the image. I'm also trying to remove the tiny gap on the left and right of the image block so it's flush. What's with all the text padding on this new upgrade? I've tried different CSS but I think i'm missing something. Want to improve your Squarespace store? Check out SF. And specifically, I'd like to remove space bet Jump to content Feb 16, 2020 · I'm wondering if someone can help me to fix a padding issue. Oct 6, 2023 · Hello My client wants the accordion description text to go all the way along, currently it cuts off early (too much right padding). I'd be so grateful if you can help me reduce this. In CSS, there are two main properties responsible for spacing: margin and padding. Also It doesn't seem to be moving on desktop only mobile. Hi, I'm just creating a new site. How can I remove the left and right padding so the images go to the edge of the screen? Best, Faizal Jul 23, 2024 · For instance, at the top of a web page, you might have a logo with padding being the space between the logo and the margin or border of the header. image-block { padding-left: 5px; padding-right: 5px; padding-bottom: 5px; } Aug 3, 2019 · The website is: https://chinchilla-shallot. Note that the white bars you see on the sides of the images come from IG and are not Sqsp padding. I have added a markdown box (with a H5 and H6). Feb 17. tuanphan. com Does anyone know how I can remove the padding from this section and the images within. section-gallery { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; Sep 28, 2021 · Hi! I'd like to remove the padding on top of the production section so that the categories are closer to the header copy. Please help 😇 Sep 19, 2023 · Squarespace is dynamic, as websites need to be as they get viewed on a huge number of screen sizes and resolutions. Apr 18, 2024 · Try this code, but mess around with the padding line of code. The slight variation in the padding is simply coming from those constraints. Can this be removed to bring the newsletter block up a bit? Looks strange/accidental that it's a bit below the other text in the footer Jan 5, 2022 · Site URL: https://www. If you only want to apply this to this particular gallery, then you can specify using the unique ID. section-class { padding-top: 0px; /* Adjust as needed */ padding-bottom: 0px; /* Adjust as needed */} It was 20 px and I changed it to 0. 25em; } /* end reduce padding between gallery and following text block */ Mar 7, 2023 · I set the section height to 1% and made the corresponding CSS change, and it's almost perfect. See the text lines that end in lighting, specific and you. products. ProductItem-nav {display: none !important;} If needed, you can shrink the page's padding a bit further by adding the following CSS and modifying the number value: . Aug 27, 2020 · Hi Use this code in Design -> Custom CSS # siteWrapper main # page {margin-top:-39px!important;} Please use the like button if it helps you! Best, Leopold Jun 16, 2024 · To remove grid padding on fluid engine it’s super simple. ProductItem-additional { margin-top: 0 Feb 24, 2025 · It appears that you have a section at the top of the page with the automatic padding to account for the header removed with this CSS: If you remove the CSS, you'll be able to remove the sec. Jan 5, 2020 · Looking to reduce: 1) the padding/height of the page title section that is in-between the site header at the top and the galley image section (see America-East Coast page) 2) the padding between the bottom of the gallery image section and the footer Website is https://purple-chinchilla-4bnr. To the right of this there is negative space. i can see that it's at 54px and would like it to be at 10px for the top padding. I have attached a photo. Feb 14, 2020 · Hi There, I'm new to squarespace, and find it pretty awesome, but there is one simple thing I just cannot figure out: I would like to add an image within a container/element (ie a block) on a page, with the image automatically streching to full width of the browser, but without cropping any of th Feb 7, 2021 · Add to Design > Custom CSS /* Music page top padding */ body#collection-5fef10ee0493bd2827f2e4f0 #page section:first-child { padding-top: 140px !important; } Apr 8, 2015 · How would I reduce the gap between these two areas (in the screenshot)? I can’t find the correct CSS to help me. https://khp-la Jun 2, 2022 · navigation How to remove the extra padding at the top of the nav on 7. sqs-block. Top Posters In This Topic. Main { padding-top Free online sessions where you’ll learn Dec 23, 2022 · One way to reduce the padding between images is to adjust the spacing in your CSS. friendsofrecoveryneo. May 2, 2024 · A note regarding Squarespace 5 sites: Squarespace 5, our legacy platform, doesn't allow permissions to be edited. Popular Days. The grid doesn't extend to the top/bottom edges. . products. This guide will explain the benefits of header padding, padding options, and how to I'm trying to remove the padding above the gallery in order to get rid of the area marked with red. Jun 18, 2021 · Add to Design > custom CSS /* Free must have images page padding */ body#collection-60cc86e5278f4a55adbaa5ab main. How do I make the blue line flush with the purple? Thank you for any help! Aug 7, 2019 · Is there a way to remove padding inside of a code block? I've inserted an image using a Code block and want the block to fit snug around the image itself, but I'm getting an extra padding on all sides. com worked but it pushes the shopping cart off the screen: trueselfcouture. main#page { padding-top: 0px; padding-bottom: 0px; } Nov 6, 2019 · . I'm able to find information on targeting the header social icons but not the footer. Nov 5, 2021 · Site URL: https://midnight-revival. Just add the following code: img {padding: 0px;} This will remove all of the default padding that Squarespace adds around images. Communication should be honest. video-block { padding-left: 0 !important; padding-right: 0 !important; } Mar 19, 2013 · . gallery-grid. So it means it doesn't sit flush with the rest of the website content. 6. I would like the video to fill its space completely Feb 22, 2025 · You can use this to Website Tools > Custom CSS. Oct 17, 2023 · I am trying to remove the white space, padding, or margin located below the header, and above the image block in a page layout (this page is not linked to my website Nov 4, 2023 · Hi there, i'm struggling trying to get my video to completely fill its 'box' at all times no matter what browser size. Posted July 27, 2023. com/for-support I'm trying to decrease the bottom padding of a newsletter subscription form (the area of the red box in the Sep 8, 2023 · Squarespace Website Designer Contact me: https://squarefortytwo. Provided is a screenshot of my mobile view plus the existing code I'm using (courtesy of tuanphan in another thread - thanks for that!) to scale my background graphics down to fit the mobile screen. The text has a large gap between the headings and I'm wondering if there's any way to make the gap smaller? I've checked the Syntax cheat sheet but there's no help for this. gallery-masonry[data-width="full"] { padding-top: 0; } How can I adapt this to my index page using the Ethan template? I've removed the Nav and Header bar, but there's a ton of space between the top of the page and the content. com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) Spark Plugin (Referral link) Jun 26, 2013 · I have tried this bit of code: hr { margin: 3px; } and it worked, to an extent. The top and bottom borders/spacing/padding are acceptable enough on a desktop: However, on a mobile there is too much border/spacing/padding above and below the gallery block: No matter what I try, I just can't seem to reduce it. And when I set the video section to that same color, it has the small line at the top. Jun 18, 2020 · Hi @bangank36 Is there a way to modify this code so it works with a shopping cart icon in the header section? The second code you provided for pamelaakerman. It works for me in case of if you want to reduce space between an image (photo) and a new section (text). Jun 10, 2020 · i used the code to remove the padding and it worked, but i still think there is too much space between the top of the page and the header. ProductItem . In this video, I explain the difference between margin and padding, how to know which one is causing the space, and how to remove it (or add to it). Jan 8, 2025 · Remove the padding above and below the slide show, add this to your Custom CSS code:. Is there a way we can keep the same width (site width), but just remove the top padding. div#gridThumbs { padding-top: 10px !important; } To remove padding on Mobile Only, use this CSS code @media screen and (max-width:767px) { div#gridThumbs { padding-top: 10px !important; } } To remove padding on specific Portfolio Page, you can find Page ID. I would now like to remove the excess white padding space from the left and bottom of the image (highlighted in green - see attachment). collection-content-wrapper {padding-top: 0vw;} Let me know how it goes 🙂 Sep 21, 2023 · Hi! I use the Brine template in 7. The problem being it's adding a margin around all sides of the horizontal rule. header-announcement-bar-wrapper { padding-top: 0 !important; } which is OK but I would still like less. I advocate for both—on behalf of users everywhere. is there a way to make it even less than 0? tuanphan Posted September 28, 2020 Mar 23, 2025 · To remove padding on top of Portfolio Page, you can use this code to Custom CSS box. Nov 23, 2021 · Add to Design > Custom CSS . Feb 15, 2023 · Top Posters In This Topic. Essentially I want the 2 images to take up the entire section but I can't seem to get rid of the background at the bottom and on the sides in mobile. When I put it below all my other css, it makes the email and subject stack each other on the left. 0. A note regarding Acuity Scheduling accounts: Granting billing permissions is not possible on Acuity accounts without a Squarespace login. I'm trying to remove the padding from the social icons/links in my footer but I'm having trouble targeting them. gallery-strips { padding-top: 0px !important; padding-bottom: 0px !important;}} Any help would be super appreciated! Mar 23, 2025 · To remove padding on top of Portfolio Page, you can use this code to Custom CSS box. 2. I've looked at a few similar questions and tutorials on YT but haven't been able to make those CSS fixes work for me. 4. com/config/pages Hello, I wanted to know if there is a way to remove the padding to the right of my homepage Nov 21, 2020 · Add the following to Design > Custom CSS. As the margin px value increased, the shorter the horizontal rule got. Mar 12, 2022 · All the text on the footer is aligned horizontally along the top for where each column starts, but the newsletter block title text is a number of pixels lower, clearly because of some padding on the top. Mar 14, 2021 · it's actually a section, you can use this tool to get block/section unique id section[data-section-id="604cd95eccf08c42a6bdbe89"] . You simply need to hit the Gap icon that shows no gaps or padding. Oct 24, 2023 · Hello! I am looking to get rid of the padding from my gallery section on my website. gallery-grid { padding-top: 0 !important; } . When I hover over the video that's where the UI controls are. e. DIGITAL for plugin solutions with a proven track record. I want the edges of the video to be round and for that to work, I have to remove the padding. In the panel that appears the option is right there. content-wrapper { padding: 0 !important; margin: 0 !important Dec 12, 2023 · How can I remove the top padding that automatically comes with text blocks? I'm unable to align a text and image block because of the top padding on the text block. Mar 3, 2025 · Hey, I am trying to create this overlap image style in the footer, but it is causing a lot of padding at the bottom of the page. I am on Squarespace 7. When I select L or 100 height for the section above it works, but I end up with too much white space which I don't want. com Apr 10, 2020 · None of the codes provided are working for me when trying to eliminate the blank space on the mobile view of my homepage. Yes that is how I would like it. I want to specifically bump up the video block - it is widescreen and is automatically centered on the block. The problems are only thin strips at top and bottom. You need to be a member in order to leave a comment Jul 11, 2023 · The problem I'm facing is that setting the padding in this block to 20 px in order to create a space between the pictures also adds an additional space below the pictures. It is also on a grid system, so the block has to stay within those bounds. This adds to the padding around the entire block and the bottom has more spacing than all other edges and makes my text look weirdly far away. Is there a way to remove the white space so it fin Jul 17, 2024 · Hello! I need to remove the white space under the video player. list-section-title { padding-bottom: 10px !important; /* Adds 10px padding below the title to create space from the element below */ margin-top: -150px !important; /* Moves the title upwards by 150px to Sep 14, 2022 · I tried the custom code on this page too (Advanced section for code on this page) and it didn't remove the side padding around the video (toward the end of the page). art Hi, I have added a few shape blocks to my footer to vary the colour of the background. And I can’t find a way to reduce the paddin Nov 6, 2022 · How can I remove the padding on the top and bottom of separate sections (in new Fluid Engine). 1 and need to remove vertical padding from sections - i. Mar 29, 2022 · Whether there is too much or too little, spacing between elements in Squarespace can be tricky. website URL: https://www. image-block { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } In the Config Editor all i see is the code i’ve added, none of the existing code, which strikes me as weird. #collection-671dd8cc67b51a2d4c98872f . I had already removed the embed status script so that's not the issue sadly. 3. Any help would be appreciated 🙂 Page: https://www. But after removing it (with a custom CSS code for a single page) I was then left with blank space on top and bottom. I've tried lots of different code that people have suggested but cannot get it to work. yeahlase May 30, 2023 · Hi again. Squarespace is the all-in-one solution for anyone looking to create a beautiful website. This is what I have there now. 76. Note this will only edit the padding on this page, if you want it to change all image blocks just remove the collection id. This guide will explain the benefits of header padding, padding options, and how to Mar 22, 2020 · padding-top: 2px !important; padding-bottom: 2px !important; Does anyone know how to fix this? Thank you. Is there a way to align the video to the top of the block? May 13, 2022 · Hello, I am trying to remove the top and bottom gaps between Gallery-Strips that appear only when in Mobile View. Aug 4, 2022 · I see the padding. is there a way to remove this? I also need this bow image to be overlapping sections so need it to be on the top layer!? Feb 29, 2024 · hi there! i would like to remove the padding at the top of the marquee scrolling text so that it sits flush to the top of the section. llgrtk idtay andrl xftcryf zzsm wck ccjp hkztx rbqg kkyiqjzq ogyebv fbyc slnu drexeqr xpcjsuq