Beyondspace
-
Posts
9,915 -
Joined
-
Last visited
-
Days Won
80
Community Answers
-
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
-
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; }
-
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
-
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
-
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
-
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 -
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>
-
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; }
-
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
-
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
-
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
-
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/
-
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
-
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
-
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>
-
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?
-
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; } }
-
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
-
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
-
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
-
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
-
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
-
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
-
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