Jump to content


  • Posts

  • Joined

  • Last visited

Community Answers

  1. Vicks's post in Background hover on navigation "bumping" items was marked as the answer   
    here is your CSS, you just needed to be more specific when targeting the item. Because of the specificity of CSS, there was another class taking over your padding settings. If you just change the selector, it should work:
    /* Nav item color */ .header .header-nav-wrapper a { border-radius: 10px 10px 0px 0px; padding: 2px 10px; transition-duration: 0.4s; } /* Nav item hover color */ .header .header-nav-wrapper a:hover { background-color: #D5B56E !important; border-radius: 10px 10px 0px 0px; padding: 2px 10px; transition-duration: 0.4s; }  
  2. Vicks's post in Reveal text on hover (image) was marked as the answer   
    glad I could help. You can mark it as solution if it solved the issue. 
  3. Vicks's post in Target Simple List Button was marked as the answer   
    here is code for the button 
    .list-item a.sqs-button-element--primary { letter-spacing: 0em !important; } .list-item a.sqs-button-element--primary:hover { /* notice the 0.5 in the last argument in the hsla, thats alpha, 0.5 means 50% transparent. */ background-color: hsla(289.41,92.73%,10.78%,0.5) !important; } This will update the hover color also.
  4. Vicks's post in Icons between Navigation links and resizing logo for large screens was marked as the answer   
    for nav icons, you can just change the css selector 

    .header-nav-item a:after => .header-nav-item a:before
    and remove or adjust the margin-left:10px  accordingly to even out the spacing between.
    However, changing the class selector will also move the icons on the left side of menu also. I can provide better suggestion if you share the website, I can take a look at logo sizing issue too.
  5. Vicks's post in Looking to add a code to display our google reviews on our webpage. Anyone know? was marked as the answer   
    As of yet google did not provide any embed or widgets to show revisews. However they provide access to the reviews data through API. 
    That means you need to authenticate with Google using your google account and generate a secret token. And use that token to fetch data from google's server and display it on your website.. 
    However, its not recommended to do this on squarespace website. Beecause any code you add to squarespace is added on the client side and can be seen by anyone who can see your website, this can get access to your private token to gain access (hack) to your google account.
    Usually you keep your private token on your server and call your server to get the data about your reviews. Your server keeps the token hidden from prying eyes. But squarespace didn't provide such machanism, i you can't add server side code.
    That's why you will see many website providing such services. You store your auth keys in their server and they give your some code which connect to their server and downloads the reviews from google using your secret key and shows it on your website. 
    If you search "google review embed" on google, you will find many websites offering such service. Though there might be some fee involved.
  6. Vicks's post in Help positioning text with flexbox was marked as the answer   
    Here you go:
    .summary-excerpt { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } You have a div inside each card, which has a class summary-excerpt. This div contains two paragraphs, one for the description and other for price.
    When I make it flex, both paragraph align at top and bottom, however, in the first card, you only have one paragraph and no description. Perhaps you can add some blank space just like other cards to fix that.
  7. Vicks's post in CSS for two columns of products on mobile in version 7.0 was marked as the answer   
    Try this:

    @media only screen and (max-width: 700px){ #productList { display: grid; gap:10px; grid-template-columns: repeat(2, 1fr); } #productList .product { Float:none; width: auto; } #productList .product .product-image img{ left:0 !important; top:0 !important; width: 100% !important; height: 100% !important; object-fit: cover; } } This will update most of your products. However, I noticed when you select all, the products which are displayed are using different layout. Check if this script works.. and let me know for which page it doesnt work.
  8. Vicks's post in Moving the carousel arrows on product page was marked as the answer   
    @media screen and (max-width: 767px){ .ProductItem-gallery-carousel-controls { height: calc(100% + 70px); } } add this line below my previous code.. its basically directing the slider to have the 100% height of its images, and using CSS calc function to add 70px more to it. And we are only doing it for mobile screen with width smaller than 767px. (this 767 is pre-defined breakpoint in squarespace to alter appearance)
  9. Vicks's post in Animated Text Help was marked as the answer   
    it looks like your span has position relative and not absolute as in the code above..
    I have updated the code:
    made the grid container relative, so that all child follow absolute position from this grid. made the spans absolute. added line-height so not crop the texts. aligned the items to center, because they all will stick to left once positioned absolute. .fadeIn{ display: grid; text-indent: 0px; position:relative; justify-items: center; // align items to center line-height: 1.2em; // added bigger line height so that element doesnt cut off from top } .fadeIn span{ position: absolute; } if the posittion absolute in .fadeIn span doesnt work, try " absolute !important; "
    hope this helps
  • 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.