Jump to content

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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


  • Events Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hi, I need to hide specific Purchase/add-to-cart buttons but cannot find a way how? Normal practise would be to find the element by ID then hide it using CSS. However, as you can see by the code below, this does not work? #yui_3_17_2_1_1650019970053_117 { display: none !important; visibility: hidden !important; } #yui_3_17_2_1_1669412012986_119 { display: none !important; visibility: hidden !important; } Website examples: https://www.labyrinthrecords.net/store/p/lab007-luke-garcia-marcos-french-craving-ep https://www.labyrinthrecords.net/store/p/lab006-boys-be-kko-monnaka-ep
  2. Hi everyone, I'm trying to change back my layout again for mobile after getting rid of the errors in my css code. Currently the layout isn't in order as the product images should be in the middle rather than bottom. If anyone can help me that would be great! Thank you
  3. Hoping someone is able to guide me with my issue. I used the following CSS code to create a split navigation so that my logo is centred and my navigation links are on either side. Since implementing this code though my logo no longer links to the homepage. I'd greatly appreciate some guidance if possible! ☺️ Thanks in advance! /* Split Navigation */ .header-display-desktop .header-title { height: 7vw !important; display: flex; align-items: center !important; justify-content: center; } .header-display-desktop .header-nav { position: absolute; top: 0; margin-top: 0 !important; height: 7vw !important; display: flex; align-items: center !important; justify-content: center; } .header-display-desktop .header-nav-item:nth-of-type(2) { margin-right: 40vw !important; }
  4. Hello. I am wondering if someone can provide the css code to add a second button to my navigation. I would like to have an existing page "Client Portal" - be accessible only through a button instead of a link in the navigation. If possible, this button would be next to the Donate button in the current navigation. Any assistance would be much appreciated! https://hibiscus-dachshund-wk7b.squarespace.com/config/ pw: forumhelp1 Thank you in advance!
  5. Hey, I am trying to set the header to have no background, only navigation buttons. Dynamic layout of the header lets me do so, apparently on every page, except for a product page, which would look nice, given that I have 16:9 product pictures and a "Full" style of the product page layout. Is there a piece of code for the custom CSS section that will fix that issue?
  6. I have a bit of a large calc function inside a background linear gradient. Originally the calc function seemed to be computed incorrectly and after some digging I found that I needed to escape it in the custom CSS. I finally managed to get the gradient I wanted with the following line, but now the editor view is broken as a result. The offending line: background: linear-gradient( to right, #B1B5B7, #B1B5B7 calc(~"((100% - 1350px) / 2.0) + 877px"), #7DA57E calc(~"((100% - 1350px) / 2.0) + 877px"), #7DA57E); A couple of errors show up in the console: error-reporter-b1a003a2d08ddc2bf6213-min.en-US.js:14 Unhandled Promise rejection: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. ; Zone: <root> ; Task: Promise.then ; Value: Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. 80982-82074d37f31ce71d02b63-min.en-US.js:9 Uncaught TypeError: a is not a function EDIT: Just noting this is on Squarespace v7.0
  7. Hey there, So what I'm wanting to do is to have each title of each project to have their own unique typeface. Like "The Boys" would be Arial, "Furballs" would be Papyrus, and so on and so on. I've tried applying :nth-child to no avail. What am I missing??? Thank you.
  8. Hello Squarespace friends and community. Has anyone managed or knows how to remove the 0.00 from prices Example id like it to display as $1,360 Instead of default $1360.00 Www.spacept.com.au
  9. Hi, I'm trying to adjust the top padding on my store page, since it's just too far down from the "General Store" logo & too much of a gap. There's nowhere to adjust this on the standard section format editor. Attached here are photos of what it looks like currently, and what I want it to look like (edited on photoshop). Any tips would be appreciated!
  10. I don't like how the "Sold Out" tag is displayed. It is shown with small caps and a brown color. I want it like I've written it (the S and the O as capitals, and the rest lowercase), in italic and white color. I also don't like how it's on the very right of the image, making it too close to the next product's name. I'd like to have it next to the product's name, like this: Futur solitari Sold Out Can I do both changes?
  11. Hello. I am working on a client site and would love guidance (css) for how to transition from desktop to mobile and to have the following section in mobile lay out the cards with two per row since the content is super limited and the current layout requires too much scrolling. I have some css code already which I thought would help optimize the mobile experience but it doesn't seem to help with this specific issue. I've attached an image of the desktop version [6 across] and mobile version [1 across]. Does anyone have the CSS code to adjust this? I'd also welcome any additional suggestions with optimizing resizing for mobile (I am relatively new at this). Thank you in advance! https://hibiscus-dachshund-wk7b.squarespace.com/config/ pw: forumhelp1
  12. Hey all trying to create an effect where hovering over one block affects the action of a different block I managed to do it in w3 try it using html with images assigned as parent/child but as soon as I try to do the same exact thing with direct blocks, I have an issue and im not sure how to resolve it. Let me know if you can spot anything that I may be doing wrong. I've inserted my w3 code as well at the bottom Here is the site https://blueberry-carrot-xawg.squarespace.com/selected PW codeblock #block-yui_3_17_2_1_1669839743068_49521 { width:100%; } #block-yui_3_17_2_1_1669786934605_193853 { width: 100%; height: 100%; opacity:0; transition: opacity .5s ease; } #block-yui_3_17_2_1_1669839743068_49521:hover #block-yui_3_17_2_1_1669786934605_193853 { opacity: 1 !important; transition: 1s; } w3 try it code <html> <head> <style> body { text-align: center; } .parent { width: 600px; height: 200px; } .child { width: 100%; height: 100%; background-color:rgba(255, 255, 255, 0); } .parent:hover .child { opacity: 1 !important; transition: 1s !important; } .child { border: none; padding: 50px 160px; margin-top: 50px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; opacity:0; transition: opacity .5s ease; } </style> </head> <body> <div class="parent"><img src="https://i.ibb.co/tKPzwMB/clapper-closed.png" alt="" /> <button class="child"><img src="https://i.ibb.co/Xb8SRs1/closed.png" alt="" /> </button> </div> </body> </html>
  13. i would like some help with my code pen on squarespace This is the codepen .neoncontainer .flex { position: relative; width: 260px; height: 200px; display: flex; justify-content: center; align-items: center; margin: 40px 30px; transition: 0.5s; } .neoncontainer .box::before { content:' '; position: absolute; top: 0; left: 50px; width: 50%; height: 100%; text-decoration: none; background: #fff; border-radius: 8px; transform: skewX(15deg); transition: 0.5s; } .neoncontainer .box::after { content:''; position: absolute; top: 0; left: 50; width: 50%; height: 100%; background: #fff; border-radius: 8px; transform: skewX(15deg); transition: 0.5s; filter: blur(30px); } .neoncontainer .box:hover:before, .neoncontainer .box:hover:after { transform: skewX(0deg); left: 20px; width: calc(100% - 90px); } .neoncontainer .box:nth-child(1):before, .neoncontainer .box:nth-child(1):after { background: linear-gradient(315deg, #ffbc00, #ff0058) } .neoncontainer .box:nth-child(2):before, .container .box:nth-child(2):after { background: linear-gradient(315deg, #03a9f4, #ff0058) } .neoncontainer .box:nth-child(3):before, .neoncontainer .box:nth-child(3):after { background: linear-gradient(315deg, #4dff03, #00d0ff) } .neoncontainer .box span { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; } .neoncontainer .box span::before { content:''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); opacity: 0; transition: 0.1s; animation: animate 2s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0,0,0,0.08) } .neoncontainer .box:hover span::before { top: -50px; left: 50px; width: 100px; height: 100px; opacity: 1; } .neoncontainer .box span::after { content:''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); opacity: 0; transition: 0.5s; animation: animate 2s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0,0,0,0.08); animation-delay: -1s; } .neoncontainer .box:hover span:after { bottom: -50px; right: 50px; width: 100px; height: 100px; opacity: 1; } @keyframes animate { 0%, 100% { transform: translateY(10px); } 50% { transform: translate(-10px); } } .neoncontainer .box .content { position: relative; left: 0; padding: 20px 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; z-index: 1; transform: 0.5s; color: #fff; } .neoncontainer .box:hover .content { left: -25px; padding: 60px 40px; } .neoncontainer .box .content h2 { font-size: 2em; color: #fff; margin-bottom: 10px; } .neoncontainer .box .content p { font-size: 1.1em; margin-bottom: 10px; line-height: 1.4em; } .neoncontainer .box .content a { display: inline-block; font-size: 1.1em; color: #111; background: #fff; padding: 10px; border-radius: 4px; text-decoration: none; font-weight: 700; margin-top: 5px; } .neoncontainer .box .content a:hover { background: #ffcf4d; border: 1px solid rgba(255, 0, 88, 0.4); box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2); } I've added it to my product pages and I've change the colour #hex codes and I've removed the buttons In mobile and desktop view the boxes and crammed on top of each other and overlapping. My question is this.. is there a way I can add some space between each box so they display better on desktop and mobile? Maybe it would be better if they stacked on mobile but displayed in a row on desktop? Do you know how to achieve this? This is the link to the URL I've been playing with today with your help. https://www.spacept.com.au/sqaurespace-websites/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n https://codepen.io/kodplay/pen/oNBreRJ this is the original code pen I removed the code for the container, I also removed the buttons I just want them to stack on mobile and display horizontal on desktop view with padding either side of the boxes so they're not crammed
  14. Just got off a live chat for this issue with no result as they refuse to help me when it's related to custom CSS. I've had code to have my background color every other section as an orange gradient and it has worked for about a year now. All of a sudden without any changes on the website for a good while, it has stopped working. The last thing I did was playing around with a plugin for a gallery and while working with it the gradients worked just fine. It also worked fine after this, so I don't think it causes the problem. Removing the code for it doesn't help either. I tried to copy section-IDs again to make sure it was still the correct ones in the code, but nothing. What could be the problem here? The gradients really made the whole website...
  15. I am hoping someone is able to help. I am getting an error message that there is something wrong with my custom CSS - when I look at the Custom CSS it states that there is a missing opening `{`
  16. Hello! I was wondering if anyone knew how I could clean up the product page I have to better match the example attached. I've used an embedded code snippet to bring the accordion menu & bear arm image from "Additional Info" to underneath the "Product Description" Is it possible to get the image to sit over along the right side border (versus indented)? https://bearassbikinis.squarespace.com/explore/?pass=demo Thank you!
  17. On the Arkansas Hunts page there is a List Gallery that looks good on desktop, but does not look good on mobile (I've attached photos with examples) Does anyone know of custom css code that would allow the image to be the full width above the photo title and description on mobile view?
  18. Hi, For some reason I haven't been able to edit the "Login" window in any way, even with the !important tags. I haven't had any problems editing the other pages in CSS, but this one doesn't cooperate with me. Not sure if it's locked or if it's something I'm doing wrong. This is what I've written, I have tested multiple variations of this: //Login/Registration //Window .Dialog-container-uCx0n { background-color: #080808 !important; } //Title .Dialog-container-uCx0n h1 { color: #FFF !important; } //Sign in button .Button-container-BtFfe { background-color: #FFF !important; color: #000000 !important; } //Bottom text .Dialog-container-uCx0n footer a { color: #FFF !important; } //Input fields .Input-container-1PpPx input { font-family: 'Clarkson', 'Proxima Nova', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; color: #FFF !important; background-color: #000000 !important; } //Hide header "login button" .user-accounts-link.loaded .user-accounts-text-link { display: none; } Thank you!
  19. Hello. Working on a site the first section of each page (except homepage) is not loading correctly in mobile. Instead of loading at the top of the section, it is loading in the middle of the content, and pushing some of the section content down to overlap with the second section. Examples below. Rendering correctly in desktop version. (https://hibiscus-dachshund-wk7b.squarespace.com/config/design)! This is only happening in mobile. Can someone look at my CSS to see if I have anything incorrect that could be causing this? Or if there is a fix? I'm still pretty mid-level with SS. password: forumhelp THANK YOU!
  20. Hi there! I have a team section using simple list and would like to have the button on each team member open full bio without leaving the page. Either as a dropdown or lightbox text. It seems that the button by default can only link to a page, website, file etc. Any help on this is greatly appreciated!
  21. Hello, I am trying to create some custom, irregular borders for my sections in 7.1. I have searched up and down, and have not found a simple solution that currently works. I tried https://schwartz-edmisten.com/blog/custom-section-divider-in-squarespace but the code did not work and in the comments below the article, Chris Schwartz-Edmisten says that his code no longer works with Fluid Engine. I ended up finding this solution by Ryan Dejaegher https://ryandejaegher.com/how-to-make-wavy-section-transitions-in-squarespace-7.1/ using SVGs and CSS clip-paths. The process of creating the code for the SVG paths is very complicated (you have to insert it into the footer code injection), but it seems to have worked OK. Unfortunately, there are two problems: 1. When changing the size of the browser window (I am using Chrome), there sometimes seems to be a thin white line that separates the aqua background color of the section I am targeting and the irregular SVG shape. Depending on how you re-size the window, the white line appears and disappears. Having the line there really ruins the illusion of the irregular shape. I have attached a screen shot of what it looks like. 2. Inserting these SVG clip-paths seems to have added some unwanted extra white space at the bottom of the page. Does anyone have any ideas about either a) a simpler approach that works either with SVG or PNG shapes in the current version of 7.1, or b) a way to fix the two problems stated above? Here is the code: /* Adds downward facing wave to bottom of aqua section */ [data-section-id="6387b11f2aa80e0cd874d25a"] { position:relative; } [data-section-id="6387b11f2aa80e0cd874d25a"]:after { position: absolute; content: ''; width: 100%; height: 100px; top: 0; left: 0; background: #98d4d7 ; clip-path: url(#wave-bottom); } /* Adds upward facing wave to bottom of white section */ [data-section-id="6387b11f2aa80e0cd874d253"]:after { position: absolute; content: ''; width: 100%; height: 100px; bottom: 0; left: 0; background: #98d4d7 ; clip-path: url(#wave-top); } The website is: https://bell-orange-3fdd.squarespace.com/ and the password is "irregular". Thank you in advance for your help! - Jesse
  22. So in the classic editor images had a poster option that had a text overlay option that allowed for pretty easy css to manipulate the effect on hover in unison. Now in 7.1 they are separate blocks/classes so I'm trying to figure out how to create the same affect as my previous website. See videos attached as an example. coding problem_1.mp4 coding problem 2.mp4
  23. Website: http://www.testing.net The text size of our poster image blocks on our 7.0 site was defaulting to body copy, no matter what we tried, so I've added this code: .design-layout-poster * { font-size: 25px !important; } On the three homepage blocks lower down on the page (OIL & GAS/INDUSTRIAL/AEROSPACE) the text size is now fine, but on the INDUSTRIES page (http://www.testing.net/industries) I want the title to be larger (H1) and the subtitle text to be smaller (H3). Adjusting the font sizes in the Site Styles doesn't change anything. Please help! @tuanphan - we can always count on you!
  24. Hello everyone, I am trying to align the header contents (site title, navigation links, social icon) with the upper limit of the page's header space. They are currently centered. Is there anyway to do this? It seems that the vertical alignment/position of the header contents are not controlled via any of the options that we have on 7.1. Thanks in advance!
  25. Hy i have a question i wuld like to break text into 2 - lines insted of resizing text but every time i break text in my mobile editor it breaks on pc view end its not ok - like you see on images how culd i break the text only on mobile?
  • Create New...

Squarespace Webinars

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

Hire a Designer

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