Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by NickScola

  1. Add the page section id to the CSS. So now your CSS should look like: #page-section-60b5ff33c0b2d87d1b46b7d5 .image-block, #page-section-60b618ca71ea826d88fbefbc .image-block { @media (max-width: 640px) { width: 20%; } }
  2. Sorry for the delay, try this: .gallery-grid--layout-grid .gallery-grid-item { position: relative; overflow: hidden; &:hover { .gallery-caption { opacity: 1; } .gallery-caption .gallery-caption-wrapper { transform: translateY(0); } } .gallery-caption { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; opacity: 0; transition: opacity ease-in-out 0.25s; .gallery-caption-wrapper { height: auto; padding: 0 20px; text-align: center; transform: translateY(25vh); transition: transform ease-in-out 0.5s; } } }
  3. What's the password to the site? It's currently locked.
  4. Yes, there's a few ways to go about this. Have a go at this: .product-block .buy-button, .product-block .sqs-add-to-cart-button-wrapper { margin-top: 5px; margin-bottom: 5px; } Also, if your'e wondering why the checkout button is not moving closer its because there's a blank Squarespace block before the checkout button
  5. Try adding this to the custom css section and let me know if this works for you: .user-items-list-simple { /* -- Mobile devices (not tablet) -- */ @media (max-width: 640px) { display: flex; grid-gap: 0px !important; padding: 0px !important; flex-wrap: wrap; } .list-item { @media (max-width: 640px) { width: 39%; margin-bottom: 40px; .list-title { font-size: 13px; } .list-item-content__button-container { max-width: 100% !important; } } } }
  6. Add this to Custom CSS: .portfolio-grid-basic .grid-item .grid-image { order: 2; } .portfolio-grid-basic .grid-item .portfolio-text { order: 1; }
  7. That's so strange. Add this: .sqs-add-to-cart-button { margin: 0 auto; }
  8. Looks like for some reason the button get's applied an inline style that continues to reduce the width. That might be a Squarespace bug. However, try adding this to Custom CSS: .product-block .productDetails.center .sqs-add-to-cart-button-wrapper { width: 100% !important; }
  9. Can you share a link to the demo site you're currently working with?
  10. Paste this code in the Custom CSS section: .page-section[data-section-id="60de0bfa33d7aa1e05234f69"] .content-wrapper { max-width: 100%; padding-left: 0px; padding-right: 0px; overflow-x: hidden; }
  11. Ah, I see what's happening. On mobile Squarespace columns are full width. To fix this in this section only paste in Custom CSS #page-section-60b5ff33c0b2d87d1b46b7d5 .image-block { @media (max-width: 640px) { width: 20%; } }
  12. Headings have margins applied to them. I notice you're using a code block for this and applying inline-styles to your H2. So just add margin-top: 0px;
  13. If you go into Custom CSS and paste this in: #collection-60dd43fb867a9d19d3723218 .header-title-logo a { @media (max-width: 640px) { max-height: 120px; } } Feel free to adjust where needed.
  14. What template are you using? Are you on 7 or 7.1? If you can share the link with the password to see the site that'll be great.
  15. Yes, this is very much possible. What template are you currently using? Made changes to your site locally but would like to test this out in Squarespace really quick to make sure this is pretty easy to accomplish / scale. The website you found applies different widths / aspect ratios depending on the thumbnail image they've uploaded. An easy way to target this is either by: Adding a category / tag to the item Automatically looking at the thumbnail image original dimensions and determining if it's square, landscape, portrait, etc. From there we can apply a max or fixed width to the item container. Which is how they have some items different widths / aspect ratios. If you want feel free to email me a contributor invite to nick@nickscola.com (Admin permissions) and I'll be glad to help out.
  16. Thanks, paste this code in the custom css section: /* -- Hide Newsletter Block on /accueil -- */ #collection-58cc52aedb29d633eb5a09dc #block-yui_3_17_2_1_1625514252316_6206 { display: none; } Please note, if you remove the newsletter block from your footer and then re-add it Squarespace will generate a new Block ID. To target all newsletter blocks in the footer you can also do this: #collection-58cc52aedb29d633eb5a09dc #footer .sqs-block-newsletter { display: none; } Each page has a unique collection ID. You can find it in your source code. Finally, if you want hide this newsletter block on other pages your CSS code would look something like this /* -- Hide Newsletter Block on multiple pages -- */ #collection-58cc52aedb29d633eb5a09dc #block-yui_3_17_2_1_1625514252316_6206, #collection-REPLACE-ME-WITH-YOUR-COLLECTION-ID #block-yui_3_17_2_1_1625514252316_6206 { display: none; }
  17. Instead of using the Name form field you can use a Text field and apply a placeholder value of name
  18. Send us a link to your site. You need to target the block and collection id then hide / show in Custom CSS.
  19. Add this to the custom css and adjust the value / size when needed: .blog-item-tags { font-size: 9px; }
  20. Yes, this is pretty straight forward with Javascript. You will need to use the API from Rally.io. Write a Javascript function to perform a fetch into the API endpoint. Upon a successful request you will receive that data in JSON format. For example: { "symbol":"KSK", "priceInUSD": 7.5852780235960005, "priceInRLY": 25.084172 } From there you can retrieve this key/value pair and insert it wherever you wish. If you need help with this in more detail feel free to email me at nick@nickscola.com
  21. Yes, if you want to change the color of the LinkedIn SVG try something like this: a.icon.icon--fill[href*="linkedin"] svg { fill: blue; }
  22. Couple ways to go about this. I suggest you use Javascript for this. 1. Detect what navigation items is visible. English or Iceland 2. If Iceland navigation items are visible (not css hidden) then change the logo link Here's an example based off your site. Again, there's a few ways to go about this. if ( $('.page-collection:even').is(":visible") ) { $('.logo a').attr('href', '/iceland'); }
  23. Here's an example. Add this to the custom css and adjust where needed: a.icon.icon--fill[href*="linkedin"] { width: 124px; height: auto; }
  24. There's a couple ways to go about this. I suggest you use Javascript to create an entry in the localStorage, sessionStorage, or a simple cookie. Then if this entry or cookie exists you don't display the GIF. This way the user will only see the GIF upon initial / 1st time page load until the user closes out of the session, clear cookies, etc. Also, if you have AJAX enabled on your template you can detect if AJAX has been called. If it's been called then don't display the GIF. If you need help email me at nick@nickscola.com
  • 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.