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

Search the Community

Showing results for tags 'css'.

  • 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
    • Resources
  • 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. Hi Squarespace community, I've been leaning on many of the posts here to improve my website so many thanks to those posting and responding. Today I have a question(s) of my own. I've added a 'Select' field in my form and the box does not match the rest of standard fields. How do I reduct the padding between each form field and compact everything? Removing the mandatory asterix in each field. Many thanks again. Regards, Andrew
  2. Hi I am having issues with my squarespace site / squarespace in general - note i have tried this on multiple squarespace sites of mine but I'm having the same issue. I note that the fonts were working last night and now they are not. I have custom fonts in OTF format which I have uploaded the custom CSS page. I have used the following code: @font-face { font-family: AAA; src: url(https://static1.squarespace.com/static/62f0815356f60d45a8bd7d70/t/62f2fa9009ae867245600778/1660091024525/Recoleta-RegularDEMO.otf); } h2 { font-family: 'AAA'; } @font-face { font-family: BBB; src: url(https://static1.squarespace.com/static/62f0815356f60d45a8bd7d70/t/62f32329170496483655ff1c/1660101417637/Pacifico-Regular.ttf); } h1 { font-family: 'BBB'!important; } My issue is the custom font is not being correctly recognized by squarespace and is just replacing the text with a general serif font. Font AAA is meant to look like this: Font BBB is meant to look like this: However they are not showing up, as seen in the following list of the headers and paragraph samples form my website. Please help as this is beyond frustrating.
  3. Site URL: http://www.johnnaslaby.com/about Hi guys! I'm wondering what the CSS is for changing the color of the navigation bar on all pages except the main one? My pages are kind of all screwed up in that some pages show the navigation bar in black, but the others just come up in white like: http://www.johnnaslaby.com/about Let me know! Johnna
  4. Site URL: https://johnnaslaby.com/journal Hi there! I am pulling my hair out trying to figure out how to make the titles of the blog post get to the center of the image with the overlay and not underneath the image like it is now. If someone can help me that would be amazing! To view it, this is the page: https://johnnaslaby.com/journal
  5. Site URL: https://heptagon-brass-6xej.squarespace.com/ Hi guys! I have not found an answer anywhere how to change the standard mail icon and also add my own icons instead of link icon. How do I change this? Does anyone have a code? https://heptagon-brass-6xej.squarespace.com/ pw - hello
  6. Site URL: https://www.marieforleo.com/ Hi everyone, Is it possible to create a design similar to the "Ideal Design" in the attached image? I am trying to make it really simple for someone to download my freebie on our website so I can grow my email list. Marie Forleo is the best and easiest email sign up I have found - www.marieforleo.com SQUARESPACE NEWSLETTER BLOCK TWEAKS • Include an image • Remove "Surname" field • Stylise similar to Marie Forleo Can anyone recommend any advice or tutorials to follow? Our Website if needed - https://www.betsyandfrancis.com/ Thank you so much, James & Nicole
  7. Site URL: https://www.cryptofi.tech/events Hello, I'm trying to limit the generated excerpt for events to "X" lines/characters. For example, on this webpage (https://www.cryptofi.tech/events) the first and third entries are short enough where the entire event fits into a reasonable size, but the second event is quite long as it includes additional event information and registration information. Ideally, this would cut off at "Learn more and register here." Squarespace's built-in excerpt function does not allow links, which prevents me from using that. I also have pointer-events disabled on post titles and images (because i don't want people to access the generated events pages for things like the 1st and 3rd entries). I found this code before that I slightly edited to perhaps fit my needs, but I can't seem to get it to work and I'm not sure if I'm doing something wrong or it doesn't work in this scenario: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script src="https://www.jqueryscript.net/demo/Cropping-Text-Without-Breaking-Words-jQuery-Limit-Text/limit.text.min.js"></script> <script> $(function () { $('.eventlist-description').addClass('cuttext'); $('.cuttext').limitText({ length: 140 }); }) </script> Any ideas? A fix for individual events could also work if there's a way to just limit the second event (and easily apply to future events that may have the same issue) Thank you!
  8. Site URL: https://oriole-gar-h86y.squarespace.com/ Basically, I would like to know how to achieve this scroll effect in my website: https://www.zendaya.com/ Where the background with the name Zendaya stays fixed until a certain point, and then along with the image, the below section sweeps it out of view once you continue scrolling.
  9. Site URL: https://www.dianaoviedo.work/ Hello! I was wondering if anyone had any idea how I can fix this issue I'm having with the image blocks on my homepage. I've really tried everything I could think of CSS-wise and have come up with nothing that seems to work. The problem: The image blocks are all slightly different heights, despite being the same size images. And this causes the bottom of the images to be misaligned. The tops of all the images are all at the same level, but the bottoms are not. Any help you can provide would be greatly appreciated! 😊 My site: https://www.dianaoviedo.work/
  10. Site URL: https://www.avocadoventures.co/ I am using the new Fluid Engine editor and things look great on the desktop and the mobile version of the site. Even tablets that are less than 769 px look fine because they are using the same mobile 8 square grid. My problem is that larger tablet size, 769px to 1200px range, because some of the buttons on the site become huge and look obnoxious or stack weirdly or just don't fit right in the space anymore. Is there a way to adjust the size of the text or padding or something just for the tablet size so that it doesn't totally distort the buttons? Screenshot attached for reference of a crazy looking button. Thanks in advance!
  11. I am looking for a way to force summary blocks to display 3 thumbnails per row along with their excerpt for mobile screens. Does someone know how to accomplish this? I have the summary block on the page below: https://www.dothingsnyc.com/journal Thanks, Josh
  12. Site URL: https://www.andreaaresu.com/ Hi everyone! I'm trying to achieve the same effect as shown in the video attached below. When hovering over a navigation link on the header, I want the "active" one to stay black while the other links gets greyed out. Can anyone please help with this? Thank you. Andrea. ezgif.com-gif-maker.mp4
  13. Site URL: https://www.frmez.com/bismarck-house-aba Hi all, Trying to find out how to change the size of my gallery thumbnails. Ideally to even change it to numbers instead of images? Thanks!
  14. Site URL: https://www.anvnguyen.com/home/contact Hi there! I'm looking to change the newsletter and contact buttons to a different color on hover. I've tried a few different CSS but nothing seems to work =( Ideally it goes from transparent with the colored border, to a different solid color on hover. Hope you can help, thank you so much!
  15. Site URL: https://www.inspireconference.tv/ Hey guys, im trying to do this effect that i saw on this Website. It's an on hover effect and when you hover over the image of one of the speakers, the img darkens and the text disappears but more text (the description of the person) appears. How would i do this using css? I currently have //this darkens the img. (turns opacity down on hover over .5 seconds) #block-yui_3_17_2_1_1659569849378_173807:hover { -webkit-filter: brightness(20%); -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all 1s ease; transition: all .5s ease; } But when i try so add another #block after hover, like this it wont work: #block-yui_3_17_2_1_1659569849378_173807:hover #block-yui_3_17_2_1_1659569849378_572143 { opacity: 0; } #block-yui_3_17_2_1_1660170606940_7219 { opacity: 100% } { -webkit-filter: brightness(20%); -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all 1s ease; transition: all .5s ease; } Please help me figure out what i can do to make this work. Thanks guys.
  16. Site URL: https://www.ecdesigns.com.au/ Feeling a bit discouraged at the moment, I hope someone can help me here! Basically I'm rebuilding my site, and this time I'm using an Adobe font (which means I don't get to upload the font files in Squarespace as you would normally do) I think I followed all the steps correctly, but for some reason the font weight doesn't respond to any of the changes I make in the custom CSS window! It looks quite thick (and frankly I don't like it at all) but no matter which font weight I write in the CSS it won't change. This is the initial CSS I pasted: h1, h2, h3, h4 { font-family: ivypresto-display, serif; font-weight: 100; font-style: normal; } Then I tried to add the tag 'important' : h1, h2, h3, h4 { font-family: ivypresto-display, serif; font-weight: 100!important; font-style: normal; } Then I even tried to add the block ID: #block-62e84ce8a6a00313a250c053 { font-family: ivypresto-display,serif; font-weight: 100!important; font-style: normal; } Not sure if this will help at all, but here is the code provided by Adobe which I injected in the header: <link rel="stylesheet" href="https://use.typekit.net/wgr0pgr.css"> Here are Adobe's exact instructions: "To use these fonts on a web page, copy this code into the <head> tag of your HTML: <link rel="stylesheet" href="https://use.typekit.net/wgr0pgr.css">" So I pasted this into the code injection section, in the header window. I hope I did ok. Can anyone think of anything to make the font weight responsive? TIA
  17. Site URL: https://www.anvnguyen.com/work Hi all! Is there a way to italicize the bottom navigation buttons on this site? https://www.anvnguyen.com/work (the "About" and "Art" buttons on this page for example). Even better if I could change the color on hover as well. Thank you so so much!
  18. Site URL: https://www.isolatedtogetherpodcast.org/ I've been spinning my wheels on this for hours. I've successfully loaded a custom font and it's working for most text boxes. But I can't find the code to alter the header font. I'm using the Paloma template, with Squarespace version 7.1 (though squarespace doesn't seem to recognize the template for some reason). I also can't edit the summary block of my episodes on the homepage. They're arranged in a carousel, and the font is correct on the actual episode page, but it reverts to the default font for the summary block. So two things: How do I change the header font; and How do I change the font in the summary block/carousel? Here are some of the codes i've tried that haven't worked: nav {font-family: 'TIMES';} header {font-family: 'TIMES';} header-nav-item {font-family: 'TIMES';} header-element {font-family: 'TIMES';} header-nav {font-family: 'TIMES';} header-nav-list {font-family: 'TIMES';} header-menu-nav-item {font-family: 'TIMES';} container header-menu-nav-item {font-family: 'TIMES';} container header {font-family: 'TIMES';} header-menu {font-family: 'TIMES';} header-menu--folder-list {font-family: 'TIMES';} sqs-block-content {font-family: 'TIMES';} sqs-block {font-family: 'TIMES';} #page-header nav ul a {font-family: 'TIMES' !important;} .desc-wrapper { font-family:'TIMES'; } #mainNavigation a { font-family: 'TIMES'; } #headerNav nav a { font-family: 'TIMES' !important;} .desc-wrapper p > strong { font-family: 'TIMES' !important;} None of these have worked! Please help! Thanks so much.
  19. Site URL: https://albumlogy.com Hi guys, Does anyone know why the italicized words in my text look smaller than the rest? I'm using a custom font. This is bothering me a lot, I really appreciate if anyone knows how to solve this.
  20. Site URL: https://kollektiv.studio/about Hello lovely community, I have been really struggling to create bottom borders and hide those borders for certain sections of the site (images below). The site is using a template I bought (and can't get help from them - long story). There is a sticky image section to the right on both kollektiv.studio/creative and kollektiv.studio/about that I need to 'exempt' or hide the borders/lines on, otherwise they go across the image. The code I tried to use is as follows (But I am getting a syntax error): [data-section-id="62ddaaa1b1b73a149a8ede39”], [data-section-id="62dc3c868c9f8c11cb95963d"] .page-section{border-bottom: hidden} Right now, I am using a makeshift solution that places bottom borders on certain 'children' (see code below) that doesn't interfere with the sticky image, but I would love to do this the other way around (where I have this code: .page-section{border-bottom:0.25px solid #002409} for the entire site and then hiding the bottom border for the sections I mentioned above. .page-section:nth-child(1) {border-bottom :0.25px solid #002409} .page-section:nth-child(2) {border-bottom :0.25px solid #002409} .page-section:nth-child(3) {border-bottom :0.25px solid #002409} .page-section:nth-child(9) {border-bottom :0.25px solid #002409} .page-section:nth-child(10) {border-bottom :0.25px solid #002409} .page-section:nth-child(12) {border-bottom :0.25px solid #002409} .page-section:nth-child(15) {border-bottom :0.25px solid #002409} This has been a real head banger for me. Hope someone out there can help. Thanks in advance!!!
  21. Site URL: https://www.shinewater.com/new-home-working I'm trying to remove all spacing between the bottom black horizontal line and the orange circle on the right. How can I remove all padding from the #new-page-3 section?
  22. Site URL: https://hibiscus-crane-ch9x.squarespace.com/ site PW = loomis I know there are posts about this, but they are older and also seem inconclusive. My links are showing up as underlined on mobile. I've added both of these and moved them to the top of my CSS Specifically, you'll see them here: https://hibiscus-crane-ch9x.squarespace.com/projects a { text-decoration: none !important; } a { border: none !important; background-image: none !important; }
  23. codepen:https://codepen.io/robin-dela/pen/KKPYoBq I have been trying to add this code into my sight, but I cannot seem to make it work. I have also tried adding it to a new section that uses the new Squarespace fluid engine and it appears to not even work at all versus applying the code to a code block in the previous version. Any help with this would be greatly appreciated!
  24. Site URL: https://www.usadogbehavior.com/blog Hi, I want to move the newsletter block to the top of the footer for the MOBILE version, any ideas on code? What I have tried isn't working
  25. Site URL: https://charmainemuzyka.squarespace.com/ I need some help customizing this navigation, it drives me nuts how much Squarespace's navigation styling tools are lacking! I'd like to fix the giant box extending out to the left and left-justify the text if possible. I could live with the left-justified text but the giant box/frame/container needs to go - anyone have thoughts on this? Ideally it should only extend as far as the text goes. Password is: 2022 I currently have this code in my Custom CSS section: // NAVIGATION HOVER COLOR // .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #4AC5B0 !important; } // DROPDOWN NAV - ALIGN LEFT // .Header-nav-folder * { text-align: left; } // NAV DROP DOWN FONT STYLES // .header-nav-folder-item a { font-size: 15px; font-weight: 300; line-height: 150%; }
  • Create New...