Jump to content

karan

Circle Member
  • Posts

    32
  • Joined

  • Last visited

Everything posted by karan

  1. Here is the css code to solve cut off out of frame issue; <style> video#logovideo { width: 100%; height: 100%; position: fixed; z-index: 99; background-color: #000; } </style> Remove previous JavaScript code and add below new code. New code is for showing video logo for once; <script> document.addEventListener('DOMContentLoaded', function() { var video = document.getElementById('logovideo'); var cookieName = 'videoWatched'; // Function to set a cookie function setCookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; } // Function to get a cookie by name function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } // Function to erase a cookie by name function eraseCookie(name) { document.cookie = name + '=; Max-Age=-99999999;'; } // Check if the cookie exists if (getCookie(cookieName)) { video.style.display = 'none'; } else { video.style.display = 'block'; } // Event listener for video ended video.addEventListener('ended', function() { setCookie(cookieName, 'true', 1); // Set cookie to expire in 1 day video.style.display = 'none'; }); // Erase cookie on tab close window.addEventListener('beforeunload', function() { eraseCookie(cookieName); }); }); </script>
  2. @bhua_2022 You have to update your code. First add id in video tag like this <video id="logovideo" playsinline webkit-playsinline loop muted autoplay src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4"></video> and add code as JavaScript to hide video after video ended. <script> document.addEventListener('DOMContentLoaded', function() { var video = document.getElementById('logovideo'); video.addEventListener('ended', function() { video.style.display = 'none'; }); }); </script>
  3. Message me here so you can share login details or invite me on squarespace so I can solve your issue.
  4. You have to create your custom javascript for that.
  5. Seems like overlay issue. change your code remove display flex. Create bottom corner image placeholder and change image upon hover.
  6. Hi Bhavik, Ask your client to purchase Universal plugin from here; https://www.squarewebsites.org/squarespace-plugins/p/universal-filter Install it. If look doesnt match you have to customize according to your needs.
  7. Make sure dont add vertically center line in logo and add line using css or js.
  8. Choose 4th or 5th layout in navigation and use CSS and JS to modify navigation layout according screenshot. If its create issue reply again with screenshot we will sure help you.
  9. @AmyWattonLeask Add following code in custom-css at end of line it will create two columns and improve left-right spacing. media only screen and (max-width: 767px) { section[data-section-id="654ccfd4ccc92d7d2807e5b2"] .user-items-list-simple[data-alignment-vertical="top"] { align-items:flex-start; grid-gap: 4vh 0 !important; grid-template-columns: 1fr 1fr; } }
  10. Hi @Juisafish , @tuanphan wants to tell you that you have copy "custom-css" which you have added in custom panel of site which can be located in https://fanny-lelorrain.squarespace.com/config/pages/website-tools/custom-css page. Also I can see there is typo error code in custom css. Look for code content: “+“; and replace it with content: "+"
  11. Hi @Bardurm I can check code in header. <script src="/s/SpinningText.js"></script> <script src="/s/rolltext.js"> Please remove code and add after following code. After making changes message me if its doesnt solve issue. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  12. I have windows PC I dont see issue. Its Mac glitch.
  13. Hi @charles.dicarlo Please share the demo page URL so I can review it and provide a solution.
  14. @kmc87 Hi, Add following code in custom css. https://swimdevelopment.squarespace.com/config/pages/website-tools/custom-css div#block-yui_3_17_2_1_1715781104237_12592 #sr-res-root { background-color: orange !important; } div#block-yui_3_17_2_1_1715781104237_12592 { display: flex; justify-content: center; } Survey says orange or red color best color for the effective book now buttons. If you want to change it to red change text orange with red. After adding code and save... edit page move code block bring it to center you will see color in center... it will make vertically center.
  15. Hello, There is glitch when I edit the pages using Fluid engine. Glitch is spacing and alignment using Fluid engine. Its create extra spaces and alignment problem and is happens in both OS (Mac & Windows). If I edit page using windows its works, but when I edit same page edit that I did on windows its doesnt show on Mac. Any one have same issue? Is there any solution for this?
  16. Hi kendral There seems to be an issue with your About Us page that can be resolved by implementing mobile CSS code. However, it is important to note that if it's not properly addressed, the problem may persist. To align it correctly, custom work is required, along with an explanation on how to achieve it using the Squarespace mobile editor. If you are interested in paid assistance, please let me know.
  17. Add to Design > Custom CSS div.header-nav-item--active a + div>div.header-nav-folder-item--active .header-nav-folder-item-content { background: none; }
  18. Share website URL. I will check it out issue.
  19. Hi, Could you please provide the URL of your website? I will review it and provide you with the necessary CSS code.
  20. Hi, Please share your website URL. I'll debug the issue and provide a solution.
  21. Okay remove previous code I have sent for arrow size. Copy new code from below and add it. #wm-back-to-top .btt-background { height: 60%; width: 60%; } @media (max-width:767px){ height: 100%; width: 100%; }
  22. Hi, Change width of iframe to width="100%" It will solve mobile responsive issue. Here is the code <iframe src="https://www.google.com/maps/d/u/0/embed?mid=10QuxzuB90p3JKR_7V1Bo98mGehHdOvw&ehbc=2E312F" width="100%" height="550"></iframe>
  23. Hi @amberwavescreative Would it be possible for you to upload the mobile image in the custom CSS panel? Once you have completed the upload, could you please share the image URL with me? This will allow me to provide you with the necessary code to replace the existing mobile image.
  24. Add to Design > Custom CSS #wm-back-to-top .btt-background { height: 89%; width: 85%; } Let me know if its solves size issue.
  25. Hi Jake, I kindly request you to share the website URL with me. By doing so, I will be able to provide you with the accurate code for implementing the desired arrow style.
×
×
  • 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.