Search the Community

Hello, I cannot find the css to shrink my footer and remove this empty space. The text in the footer is positioned in the footer top block. Can anyone help me?

Hello, I am using Wexley template and I want to know how to use css passing white to dark mode with a simple button? Anyone could help me? Thanks a lot!

Is it possible to use CSS or other coding to turn on the ability for users to pinch-to-zoom on images in Lightbox view on mobile devices? (It would have to be the usual zoom in/out gestures, in Lightbox mode, on a Gallery Page.) I don't understand why Squarespace still doesn't allow this. Every other website and gallery maker I know of does it, as it's a hugely useful feature for photography and art given how small mobile screens are. Thank you!

Hi! I am using the Flatiron template and have an index "gallery" on my homepage. I am looking for a way to change the thumbnail image to a different image when you hover over it, instead of displaying the title like it currently does. This is the page for reference: https://kristen-mast-12ak.squarespace.com/ Example of what I am trying to achieve, where the image changes upon hover: https://bravorocks.myportfolio.com/projects Thanks! -Kristen

I need to remove the underline text from links, how can I do that?

Hey all, I am trying to add a "typing" animation to a headline, kind of like SS used to have on its home page, so that a series of words replace each other in a continous rotation to give the impression they were being typed directly on the page (see example here). I installed the code, CSS and JavaScript from CodyHouse, which seems to be working in part, but cannot get the animation to actually work and replace each word. This is the page I'm working on. I think it might be an issue with SquareSpace not running the JavaScript properly but I'm not sure how to fix it. Any ideas?

My logo for my site is white and it doesn't show up on all the pages other then my homepage so I'm trying to find a way to put a color logo on other pages then the home page, http://www.sparkleaders.org/about/ Any help would be very appreciated! Thanks,Amir

Hello everyone. The floating pagination arrows for blog posts present in the Farro template aren't showing up for me in Chrome browsers. It seems like this is a known issue, specifically with these arrow symbols not showing in Chrome, as I believe the arrow referenced here (https://stackoverflow.com/questions/27265831/google-chrome-is-not-showing-arrow-sign) is the same one used for Farro's blog's floating pagination arrows, though I may be wrong. My website is still unpublished, so I can't link it. Has anyone else experienced this issue? Is it possible to replace the default symbols for the Farro template floating pagination arrows in blog posts? Is it possible via css? Below is some code for reference. I believe the red text is the arrow icons specifically. If necessary, I'd like to replace the default arrows with these: Right — https://fontawesome.com/icons/angle-right?style=solid Left — https://fontawesome.com/icons/angle-left?style=solid&from=io. Please let me know if any additional information is needed to solve this issue. Thanks in advance. ———————— FOR REFERENCE ———————— CSS: .tweak-icon-weight-heavy .Icon--caretLarge--left, .tweak-icon-weight-heavy .Icon--caretLarge--right, .tweak-icon-weight-heavy .Icon--caretSmall--left, .tweak-icon-weight-heavy .Icon--caretSmall--right HTML: <nav class="BlogItem-pagination clear BlogItem-pagination--loaded" data-controller="BlogItemPaginationArrows" data-controllers-bound="BlogItemPaginationArrows"> <a href="/home/traveling-with-some-intention" class="BlogItem-pagination-link BlogItem-pagination-link--prev"> <svg class="Icon Icon--caretSmall--left BlogItem-pagination-icon" viewBox="0 0 9 16"> <use xlink:href="/assets/ui-icons.svg#caret-left-small-icon"></use> </svg><!-- --><div class="BlogItem-pagination-content"> <h4 class="BlogItem-pagination-title">BLOG POST TITLE</h4> <div class="BlogItem-pagination-meta"><!-- Author --><span class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--author">AUTHOR NAME</span><!-- Date --><time class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--date" datetime="2019-10-11">October <span>11, </span>2019</time></div> </div> </a> <a href="/home/traveling-with-intention" class="BlogItem-pagination-link BlogItem-pagination-link--next"> <div class="BlogItem-pagination-content"> <h4 class="BlogItem-pagination-title">BLOG POST TITLE </h4> <div class="BlogItem-pagination-meta"><!-- Author --><span class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--author">AUTHOR NAME</span><!-- Date --><time class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--date" datetime="2019-10-10">October <span>10, </span>2019</time></div> </div><!-- --><svg class="Icon Icon--caretSmall--right BlogItem-pagination-icon" viewBox="0 0 9 16"> <use xlink:href="/assets/ui-icons.svg#caret-right-small-icon"></use> </svg> </a> </nav>

Hello Community, I would like the height of the images on my homepage in desktop view to shrink (https://www.thecigarbible.com/en/home). The current height is perfect for my mobile view but too tall for anything above the mobile breakpoint. Currently I am using the following code to stretch the images on mobile.

I had originally asked this question years ago (here): https://forum.squarespace.com/topic/79514-css-for-rollover-effect-on-image-block-poster/#comment-121074 The selected answer worked really well for awhile. Although it appears the coding has changed and this css blocks the link from being selected. I have tried altering the css any way possible, but I can't seem to target the issue correctly. I had originally thought the z-index may be the issue but targeting the link and changing it's z-index didn't fix the issue either. Any help would be greatly appreciated!

Can somebody please please help me with my website. I am trying to remove the left & right padding of the images on the top of my blog.(Mobile only) I have four blogs in total on my website but I want this modification to only effect two blogs. (https://www.thecigarbible.com/en/newsblog) and (https://www.thecigarbible.com/de/newsblog) I am using the following code to adjust other padding settings on website primarily the homepage: I am facing the complication that when I change the following code, padding is added to both text and images in the blog. I only want to remove the padding on the top image and not the text. If somebody could help or point me in the right direction that would be amazing!

I'm trying to find a solution for a Jones template Limitation. If you have any information please reply. I'm trying to find a way to Customize the Catalog Playlist Embedded in the Jones Template. I've tried to get help from support but they weren't able to assist me any further but they gave me this idea to ask the community. Thanks in advance.

Hi, my website is www.thecigarbible.com On the mobile website I want to remove all left, right and top padding on the image blocks containing the text "Newsfeed" and the one with "Cigar of the month", so that the image block has no padding top, left and right of the mobile screen. I have tried several different options posted on the forum herea but none seem to work right. I am either left with padding at the top, some small padding either left or right or other content blocks on my website are effected. I am using the template: Brine. I would really appreciate some help.

Hello, I have managed to change the H1 of my website to my custom imported font using CCS coding however I cannot change my site title. Wanting to change to font 'better signature' I am using the Foster Design Template. Current coding as attached- what am I doing wrong?

I have a client that needs to do add Tik Tok as a social media link, but would like to have the Tik Tok social media icon instead of the generic link that appears when I add the handle in connected accounts. Any suggestions on how I might grant this wish? Leslie

Hello everyone, how can I modify the following code so the 90 is displayed within a perfect square and in line with everything else.

Looking to remove the banner on just one page of the Jones templates, not all of the pages. The direct link to the post that I am attempting to do this for is here https://www.parleyave.com/geofilters. Thanks in advance!

Hello Squarespace Answers community, I'm working in the Encore template and I would really like to set a background image for one of my pages. I have an image in the background of my info page and a default black background set for the rest of the website. The encore template currently only allows 1 unique background image-on the info page. I looked into other templates and found that it would be best for me to try to work with the Encore template. I contacted Squarespace Customer care and they recommended that I try using Custom CSS. I looked up several tutorials on CSS coding within squarespace and CSS coding in general. I tried to code the image into this one page. Squarespace will not (no matter what I do) show the image on this one page. It seemed like it was not responding to the code, but when I put in the background-color command, squarespace responded no problem. I'm also not getting any error messages with the current code. Could it be that the Encore template background overrides the custom CSS background image? Or maybe the image is stuck behind the default background image I selected for the rest of the site. Is it even possible for me to have an image on one page (other than the info page) in the encore template using Custom CSS? And if so, am I going down the right path to do so? Maybe there's something wrong with my code-or a different code that would work better. Custom CSS code: collection-id-thingy { background-repeat:repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-image: url ('http://a-image-url.jpg'); } Any help at all is appreciated, Thank you, Caleb

I'm wanting to have the images in an "Image block" a specific or adjustable size when in mobile view. Thank you in advance. Attached standard vs mobile view.

Hi, Please could I get some CSS help. The Primary Navigation of the site goes like this: Nice Story - Nice Location - Nice.Green - Nice Shop I am looking to Bold the word "nice" for each of the items. Thank you!! Rob https://pepper-clarinet-ctnt.squarespace.com/

Hi! I just switched up to the Wells template. I want to change the Site Title and Navagation to a custom web font I have been using. I was able to do it to my old template, but that HTML/CSS is not working for this new template. I have the font code: @font-face { font-family: 'Recoleta'; src: url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d7047ee420001652090/1564544369780/39DCEF_0_0.woff2') format('woff2'), url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d739a4d4a0001fa3e70/1564544371195/39DCEF_0_0.woff') format('woff'), url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d63a71ed100016bafe7/1564544355607/Latinotype+-+Recoleta+SemiBold.otf') format('otf'); } but none of the HTML/CSS I have found is working for me. I have tried each of these so far and nothing. (Each at one time, not together.) #headerNav nav a { font-family: 'Recoleta' !important; } .desc-wrapper p > strong { font-family: 'Recoleta' !important; } header h1.site-title { font-family: "Recoleta"; } .has-site-title .Header-branding { font-family: "Recoleta"; } Any help would be appreciated! Thanks!

I'm attempting to round the corners on my images on two different image blocks. Since Squarespace doesn't seem to natively support rounding corners on images, I was going to do some custom CSS work to round them out. I found this blog entry that gave me the script I needed to enter, but I can't actually properly references the images themselves - only the blocks. For example, here's a test case I built. I have two image blocks here, both set to the Poster design. This is on one of the default templates without any major changes, save for swapping out some text. If I hit inspect, the only ID I can find is for the blocks themselves, not the images. I could just be missing it, but this seems to be the only ID that doesn't start with yui (which I was told isn't static and will change every time the page is reloaded). If I reference this ID when I try to round my corners, I end up with this - a rounded image block. (I'm also not sure why every time I go into edit mode, the formatting on my test photos I'm using seem to break but that's a whole 'nother thing) I'm really new to all of this, so it's totally possible I just have the whole thing completely wrong. Anyone got any pointers? Thanks!

Hello! My website is https://mastercarsreview.com/ and I want to have a cool animation on my Blog pages "News" and "Reviews", and the "Gallery" page. I want the blog post to enlarge while hovering and the images set in the Gallery page to enlarge also on hover. Does anyone have an idea about the Custom CSS? Thanks you in advance.

I'm trying to add drop shadows to images in a Summary block. I did it no problem on the Public Reports page using the Grid layout. But when I try it with a List layout on this testing page stuff goes wonky. Here's what I have in the page header code injection: <style> .sqs-block-summary-v2 .img-wrapper { -moz-box-shadow: 0px -2px 15px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px -2px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px -2px 15px 0px rgba(0,0,0,0.2); } .sqs-block-summary-v2 .summary-item { overflow: visible; } </style> Screenshots of what the page looks like before and after I added the overflow:visible bit are attached: * Before, the drop shadow is not visible on the top and left of the images. * After, the drop shadows are visible, but the layout goes very wonky. Any suggestions?

Hello, I have this table code that's responsive on another (non squarespace) site: <table class="table_three_cols" style="margin-left: auto; margin-right: auto;"> <tbody> <tr> <td> </td> <td> </tbody> </table> But on SquareSpace the tables aren't responsive and the graphics get squashed... is there any way I can simply change the CSS so as the screen shrinks the table columns drop below each other? Here's the page: https://www.library.co.uk/new-page-2 Dan