Jump to content

NickScola

Circle Member
 View Profile  See their activity

  • Posts

    50

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Everything posted by NickScola

  1. NickScola
    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. NickScola
    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. NickScola
    What's the password to the site? It's currently locked.
  4. NickScola
    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. NickScola
    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. NickScola
    Add this to Custom CSS: .portfolio-grid-basic .grid-item .grid-image { order: 2; } .portfolio-grid-basic .grid-item .portfolio-text { order: 1; }
  7. NickScola
    That's so strange. Add this: .sqs-add-to-cart-button { margin: 0 auto; }
  8. NickScola
    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. NickScola
    Can you share a link to the demo site you're currently working with?
  10. NickScola
    Yes, that's it.
  11. NickScola
    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; }
  12. NickScola
    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%; } }
  13. NickScola
    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;
  14. NickScola
    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.
  15. NickScola
    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.
  16. NickScola
    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.
  17. NickScola
    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; }
  18. NickScola
    Instead of using the Name form field you can use a Text field and apply a placeholder value of name
  19. NickScola
    Send us a link to your site. You need to target the block and collection id then hide / show in Custom CSS.
  20. NickScola
    Add this to the custom css and adjust the value / size when needed: .blog-item-tags { font-size: 9px; }
  21. NickScola
    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
  22. NickScola
    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; }
  23. NickScola
    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'); }
  24. NickScola
    Here's an example. Add this to the custom css and adjust where needed: a.icon.icon--fill[href*="linkedin"] { width: 124px; height: auto; }
  25. NickScola
    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.

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources