Jump to content

Beyondspace

Circle Member
  • Posts

    9,915
  • Joined

  • Last visited

  • Days Won

    80

Community Answers

  1. Beyondspace's post in TWO Carousels Auto Scroll was marked as the answer   
    Try
    <script> // Check if the window is loaded window.onload = function() { if (window.self !== window.top) { return; } // Function to simulate clicking the next arrow function clickNext(arrow) { arrow.click(); } // Query all elements with the class for carousel next arrows var nextArrows = document.querySelectorAll(".summary-carousel-pager-next"); // Set auto-scrolling for each carousel nextArrows.forEach(function(arrow) { // Define a function to handle auto-scrolling for a specific carousel function autoScroll() { clickNext(arrow); setTimeout(autoScroll, 4000); // Set the next auto-scroll after 4 seconds } // Start the auto-scrolling for the current carousel autoScroll(); }); } </script> If you want all your summaries on your site to auto run, place this code in your site Footer injection. Otherwise place it into each Page code injection 
  2. Beyondspace's post in Can't target a specific image gallery section (not add gallery block) with CSS was marked as the answer   
    Selector the section lightbox is
    eg
    [data-lightbox-section-id="65eba2ee2952eb7dd0fc1ef9"] .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * { stroke: white; stroke-width: 4px; }  

  3. Beyondspace's post in Hide Social Icon Links in Certain Sections was marked as the answer   
    You can add to Home > Design > Custom Css
    /*Display social icon for Ontario*/ section[data-section-id="617aeb94ea317421e526d6a0"] { .socialaccountlinks-v2-block { a { &:last-child { display: none; } &:nth-child(5) { display: none; } &:nth-child(4) { display: none; } } } } /*Display social icon for Alberta*/ section[data-section-id="617b0a9ccfc6cd38e68acb90"] { .socialaccountlinks-v2-block { a { &:first-child { display: none; } &:nth-child(2) { display: none; } &:nth-child(3) { display: none; } } } } Let me know if it works properly on your site
    Support me by pressing 👍 if this useful for you
  4. Beyondspace's post in Geoplugin redirection was marked as the answer   
    The problem is the script is called using HTTP protocol, while your Squarespace page is served as HTTPS, you will see this error in console indicated that browser not allow mixed-content, therefore the geoplugin_countryCode method is not usable
    To use the HTTPS protocol you need to buy SSL key subscription from them at 24 EUR per year https://www.geoplugin.com/premium

  5. Beyondspace's post in Accordion block on product page description BELOW the title and price was marked as the answer   
    Hi @KC13,
    Have you try using this setting

    accordion product.mp4 Hope it can help you
  6. Beyondspace's post in Cannot remove Calendly widget was marked as the answer   
    More info...


  7. Beyondspace's post in Fillable Forms not scrolling or showing entire form on screens, across browsers was marked as the answer   
    This is interesting! I never noticed this before, please use this custom CSS for fixing this, placing it under Footer injection
    <!-- sqs:beyondspace-scrollable-lightbox !--> <style>.sqs-modal-lightbox-content .lightbox-inner { position: fixed; }</style> <!-- /sqs:beyondspace-scrollable-lightbox !-->  
    Kapture 2023-11-07 at 11.03.00.mp4
  8. Beyondspace's post in Put Sale Price on line below Original Price was marked as the answer   
    Do you mean like this?

    Place this on Footer Injection
    <style> .ProductItem-product-price .original-price { display: block; } </style>  
  9. Beyondspace's post in Newsletter form hover text colour change was marked as the answer   
    try this
    .newsletter-block .newsletter-form-button:hover { color: #fff !important; }
  10. Beyondspace's post in Booking Button Isn't Too Easy To Find On A Mobile Version was marked as the answer   
    You can try adding to Home > Design > Custom Css
    @media only screen and (max-width: 767px) { .header .header-actions, .header .header-actions-action--social, .header .header-actions-action--cta { display: block; } .header-actions.header-actions--right { position: absolute; width: 100%; } .icon.icon--fill { display: none; } } Let me know how it works on your site
    Support me by pressing 👍 if this useful for you
  11. Beyondspace's post in Custom Menu was marked as the answer   
    You can try adding to Home > Design > Custom Css
    #header.shrink .header-border, #header .header-border { background: url(https://images.unsplash.com/photo-1637358650228-76cb3810b46e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); } footer .section-background { background: url(https://images.unsplash.com/photo-1637358650228-76cb3810b46e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); } footer * { color: #fff; } Change the url with your photo/color you want to apply
    Let me know how it works on your site.
    Press 👍 or mark this answer as solution to help another one too
  12. Beyondspace's post in Set unique style for a single page was marked as the answer   
    You can try putting your customize in <style> tag inside the page header injection
    Per-page code injection
    https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection?platform=v6&websiteId=615d0bdeb9e47e1e585827d3
  13. Beyondspace's post in Embedding a HTML file into Squarespace page was marked as the answer   
    Could you try to upload the files to drive using this service and embed it as iframe block?
    https://www.drv.tw/
  14. Beyondspace's post in how to hide the black block in the right part of mobile view was marked as the answer   
    The card element cause this black on the right

    You can use the following code to hide the overlap element
    @media only screen and (max-width: 767px) { .fluid-engine.fe-63d8cc62ce6221792751a11e { overflow: hidden; } } Support me by pressing 👍  or marking as solution if this useful for you
  15. Beyondspace's post in Customize Acuity Scheduling appearance was marked as the answer   
    You'll need powerhouse plan for custom css feature
    https://acuityscheduling.com/signup.php#gref
  16. Beyondspace's post in Can the year be added to the display of the published date? was marked as the answer   
    Since you site is US based, I chose the date format "mm-dd-yyyy"
    Check the snippet on snapshot mode of your site here
    The snippet is originated from https://forum.squarespace.com/topic/207841-freeshare-date-display-format-options-on-all-pages/#comment-506718
    <!-- Fix inconsistent blog date format on Squarespace 7.1 template --> <!-- Squarespace Forum Update 06-11-2021 --> <script src="https://stevenlevithan.com/assets/misc/date.format.js"></script> <script> (function(){ document.addEventListener('DOMContentLoaded', function() { const dateformat = "mm-dd-yyyy"; const pubdates = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date"); pubdates.forEach(pubDate => { let d = new Date(pubDate.getAttribute("datetime") || pubDate.innerText); if (pubDate.classList.contains('blog-meta-item--date') ) { d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute('content').split("T")[0]); } pubDate.innerHTML = d.format(dateformat); }); }); })(); </script>

  17. Beyondspace's post in One size image to display in the blog, another for the lightroom was marked as the answer   
    Could you give more detail on the demand? can you just enable the lightbox for the blog image?
  18. Beyondspace's post in Simple way to adjust homepage photo so it fits on mobile view was marked as the answer   
    Please add this to design - custom CSS
    @media screen and (max-width: 768px) { section[data-section-id="6450a422340daf0c6eeab839"] .section-background img[srcset] { height: auto !important; } }  
  19. Beyondspace's post in Need help with Text Hover effect for a Hyperlinked text was marked as the answer   
    Try adding to Home > Design > Custom Css
    #block-yui_3_17_2_1_1659816344610_5889 a:hover .sqsrte-text-color--accent { color: red; } Let me know how it works on your site
    Support me by pressing 👍 if this useful for you
  20. Beyondspace's post in custom font not loading was marked as the answer   
    Try adding to Home > Design > Custom Css
    .site-title h1.logo { font-family: 'Jug'; } Let me know how it works on your site
    Support me by pressing 👍  or marking as solution if this useful for you
  21. Beyondspace's post in Change position of shopping cart in header was marked as the answer   
    My bad
    You can try the following code
    .header-actions--right .header-actions-action { display: flex; } .header-actions-action .sqs-custom-cart { margin-right: 10px; } Support me by pressing 👍 or marking as solution if this is useful for you
  22. Beyondspace's post in Moving tags further up on a blog-post was marked as the answer   
    Is it fine with this result?

    You can try the following code on your Home > Design > Custom Css
    .blog-item-content-wrapper { display: flex; flex-wrap: wrap; } .blog-item-content { order: 2; } Support me by pressing 👍 or marking as solution if this is useful for you
  23. Beyondspace's post in CSS for changing gallery type on single page was marked as the answer   
    Ohh, it 's my bad. You can try the following one
    /* stack gallery grid on mobile except About page*/ @media only screen and (max-width: 640px){ body:not(#collection-63f2f994f2c62a3fadc044d3) .sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } } Support me by pressing 👍 or marking as solution if this is useful for you
  24. Beyondspace's post in Hide navigation in one single page was marked as the answer   
    Opps, I realize that you should wrap your code with the <style></style>
    The code on header Advance should be
    <style> header... </style> Support me by pressing 👍 or marking as solution if this is useful for you
  25. Beyondspace's post in Simple List Description Letter Spacing was marked as the answer   
    You can try adding to Home > Design > custom css
    section[data-section-id="63f578332b5e7c2a34bc0749"] .list-item-content__description * { letter-spacing: 0.05em; } Support me by pressing 👍  or marking as solution if this useful for you
×
×
  • 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.