Jump to content


Squarespace Experts
  • Posts

  • Joined

  • Last visited

Community Answers

  1. sorca_marian's post in Newsletter block code not working was marked as the answer   
    Try this code 
    input[name="email"] { background : transparent!important; color : rgb(237, 191, 42); text-align : center; border : none!important; border-bottom : 1px solid rgb(237, 191, 42)!important; } input[name="email"]::placeholder { color : rgb(237, 191, 42)!important; text-align : center; text-transform : uppercase; letter-spacing:3px; }  
  2. sorca_marian's post in Hide gallery grid items was marked as the answer   
    For the section that you have in the image, you can add the below code in the Page Header Code Injection of the homepage
    <style> @media (max-width : 767px) { #sections > :nth-child(4) .sqs-gallery-design-grid > :last-child { display : none; } } </style>  

  3. sorca_marian's post in Trying to find a code to change the link my logo takes you to when you click on it? was marked as the answer   
    There is a small mistake in the code provided.

     I updated it.
    <script> document.addEventListener('DOMContentLoaded', function() { document.querySelector('h1.image a').setAttribute('href', '/home'); }); </script>
  4. sorca_marian's post in Change Button Link in Header for one specific page was marked as the answer   

    Try using /#designs
    If it does not work, send me a link to your site so I can make some tests.
  5. sorca_marian's post in Need help including a scroll arrow at the bottom of the first section. was marked as the answer   
    If you want to scroll to the next section on arrow click, use this code
    <style> #sections > :first-child { position: relative; } .bottom { position: absolute; bottom: 0; width: 100%; text-align: center; } .scroll-indicator { display: inline-block; width: 24px; height: 24px; margin: 16px auto; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; border-bottom-right-radius: 2px; transform: rotate(45deg); animation: fade 2s infinite linear; } @keyframes fade { 0% { transform: rotate(45deg); opacity: 1; } 75% { transform: rotate(45deg) translateY(-6px) translateX(-6px); opacity: 0; } 100% { opacity: 0; } } /* This is optional and makes the scroll effect smooth */ html { scroll-behavior : smooth; } </style> <script> document.addEventListener('DOMContentLoaded', function() { var section = document.querySelector("#sections > :first-child") if (section) { var bottomDiv = document.createElement('div'); bottomDiv.className = 'bottom'; bottomDiv.innerHTML = ` <a class="scroll-indicator"></a> `; section.appendChild(bottomDiv); document.querySelector(".scroll-indicator").addEventListener("click", function(event) { event.target.closest("section").nextElementSibling.scrollIntoView(); }); } }); </script>
  6. sorca_marian's post in Tricky Mobile Menu Workaround was marked as the answer   
    Add the below code in Custom CSS
    .header-menu-nav-folder--active+div { transform: translatex(0); } .header-menu-nav-folder--active, .header-menu-controls { display : none; }  

  7. sorca_marian's post in Code Error was marked as the answer   
    You can remove it.
    It looks like a broken URL in the script tag.
    You can save it in a text file locally just in case.
  8. sorca_marian's post in Can mailto new tab send to gmail? was marked as the answer   
    I think it opens your default Mailing software
  9. sorca_marian's post in Header actions flex design was marked as the answer   
    .header-display-desktop .header-title-nav-wrapper .header-nav-list { display: flex; flex-direction : column; align-items: baseline; } .header-display-desktop .header-nav { flex: 0; } .header-display-desktop .header-nav, .header-display-desktop .header-actions--right { flex-direction : column; width: auto; } .header-display-desktop .header-actions-action--social { order : -2; } .header-display-desktop .header-actions-action--cta { order : -1; margin-top : 5px; margin-bottom : 5px; }  

  10. sorca_marian's post in Help with custom lock screen on mobile was marked as the answer   
    You can update the margin from below
    <style> @media (max-width: 767px) { .restrict-width-1000 { margin-top : 30px!important; } .lock-screen h1 { font-size : 40px!important } .lock-screen p { font-size : 15px!important } } </style>  
  11. sorca_marian's post in Mobile Navigation off screen was marked as the answer   
    Add the below code in Custom CSS below all existing code
    @media (max-width: 767px) { .header-title-nav-wrapper { flex-basis : calc(100% - 75px - 75px)!important; } }  

  12. sorca_marian's post in Carousel Button's not lining up. was marked as the answer   
    Add the below CSS in Custom CSS
    .list-item-content__button-container { max-width : 100%!important; }  

  13. sorca_marian's post in Header elements - horizontal alignment was marked as the answer   
    Can you add a link to your site?
  14. sorca_marian's post in Hamburger menu on desktop moves when cart is activated was marked as the answer   
    For the hamburger to display on the right, use the below CSS code
    .header-burger { order : 2; }  

  15. sorca_marian's post in How to disable a CSS effect on mobile was marked as the answer   
    You can use a CSS media query to only display it on larger screens

    @media (min-width: 768px) { /* Your code here */ }  
  16. sorca_marian's post in Burger menu showing on mobile but not desktop when scaled down to a smaller size was marked as the answer   
    I see a loading error for the .svg file.
    Can. you try using .png?

  17. sorca_marian's post in Social links changing colour when hovering over them! was marked as the answer   
    .sqs-svg-icon--wrapper::before { color : #fff; } .sqs-svg-icon--wrapper:hover::before { color : #d6b600; } .social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list:hover [href*="wa.me"] { opacity : 0.4; } .social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list [href*="wa.me"]:hover { opacity : 1; }  
    hover 2.mp4
  18. sorca_marian's post in Need a tagline in the header that is automatically centered but doesn't show up on mobile site was marked as the answer   
    Add the below code in Custom CSS, at the bottom, below all existing code
    .header-title { flex-grow: 20; } .header-title-logo { display : flex; align-items : center; } .header-title-logo a { flex-basis : 227px; flex-shrink: 0; } .header-title-logo::after { width: 100%; padding : 0!important; text-align : center; } @media (max-width: 767px) { .header-title-logo::after { display: none; } }  

  19. sorca_marian's post in How to add logo over the gallery slideshow reel section was marked as the answer   
    Add the below code in the Page header code injection of the homepage.
    Upload your logo and add the url(LINK TO YOUR LOGO)
    <style> #sections > :first-child .content::after { content:""; width: 100vh; height: 25vh; z-index: 9999; top: 50%; left: 50%; background: url(https://images.squarespace-cdn.com/content/6429afef9d28c96ab5cab093/be66b182-e373-4150-88ac-0e45d062a3c5/Asset+18.png) no-repeat; background-size: contain; transform: translate(-50%,-50%); position: fixed } @media (max-width: 1100px) { #sections > :first-child .content::after { width : 70vw; } } </style>  

  20. sorca_marian's post in Element displaying differently online was marked as the answer   
    <style> button[type="submit"] { background : transparent!important; border : 1px solid #000; border-radius : 5px; border-width : 1px!important; } button[type="submit"] .form-submit-button-label { color : #000!important; } button[type="submit"]:hover { background : #000!important; } button[type="submit"]:hover .form-submit-button-label { color : #fff!important; } </style>  
  21. sorca_marian's post in Extending content beyond defined site width on blog posts was marked as the answer   
    Add the below code in the Blog page settings -> Advanced -> Post Blog Item Code Injection
    <style> @media (min-width: 767px) { .sqs-block-summary-v2 { position: relative; width: 90vw; left: -17vw; } .summary-item-list { display : flex!important; gap : 20px; } .summary-item-list > * { width : 32%!important; margin : 0!important; padding : 0!important; } } </style>  

  22. sorca_marian's post in Hey Circle, I am wondering how can i apply JS to contact form fields? was marked as the answer   
    On the new Localized Forms, Squarespace is using React.js and that's why you don't see regular input changes with JavaScript.

    I have 2 videos about this and here are the source codes: https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms
  23. sorca_marian's post in Resizing photos in the lightbox was marked as the answer   
    Add the below code in the Page Header Code Injection
    </style> .gallery-lightbox-item-src { max-width: 70vw; } </style> 70vw represents 70% of the screen width.
    The code allows a maximum 70% screen width on the images of the lightbox 

  24. sorca_marian's post in how to stop the add to cart button from taking you to the checkout page in squarespace was marked as the answer   
    Make sure you have not enabled "express checkout"

  25. sorca_marian's post in FORCED MOBILE MENU - CENTERED LOGO OFF CENTRE was marked as the answer   
    Try adding the below code in Custom CSS
    .header-burger { position : absolute; right : 0 }  

  • 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.