Jump to content

LocalPlantSupply

Member
  • Posts

    16
  • Joined

  • Last visited

Posts posted by LocalPlantSupply

  1. Not sure why, logo is off center to the left. Here is my site wide CSS. I did recently add the mobile burger menu functionality to the desktop, but not sure when this started since it's only subtly to the left and only noticeable when something that is correctly centered is below the logo. It doesn't matter if the burger menu is hidden or not as it happens on all pages.

    Password is known . Here's my CSS for the site:

    //BREAK POINTS
    @mobile: ~"only screen and (max-width: 949px)";
    @desktop: ~"only screen and (min-width: 950px)";

    .header .header-burger{display:flex}.header-nav, .header-actions {display:none}

    @media only screen and (min-width: 640px){.header--menu-open .header-menu { opacity: 1; visibility: visible; width: 30%; height: 60%; margin-left: 70%; box-shadow: -5px 5px 15px #000}}

    //FONT UPLOAD
    @font-face { font-family: PICK-NAME; 
      src: url(FONT FILE URL)
    }

    .header-nav-folder-item:hover {
      a{color: #4a4fd9 !important;}
      }

    body.header--menu-open .btt {
        display: none !important;
    }

    @media (max-width: 768px){.header-menu-cta .theme-btn--primary.btn.sqs-button-element--primary{
      padding: .1em 1em !important;
      font-size: 26px !important;
      border-radius: 100px !important;
      margin-top: .01px !important;
      margin-bottom: .01px !important; /* Reduces the space between items */
      margin-left: auto !important;
      margin-right: auto !important;
      width: 250px !important;
      align-items: center;
      justify-content: center; /* Center horizontally */
      flex-wrap: wrap; /* Allow items to wrap if needed */
      text-align: center;
    }

    div.container.header-menu-nav-item>a {
      color: #fff !important;
      background-color: #686beb !important;
      padding: .1em 1em !important;
      font-size: 26px !important;
      border-radius: 100px !important;
      margin-bottom: .01px !important; /* Reduces the space between items */
      margin-left: auto !important;
      margin-right: auto !important;
      width: 200px;
      align-items: center;
      display: flex;
      justify-content: center; /* Center horizontally */
      flex-wrap: wrap; /* Allow items to wrap if needed */
      text-align: center;
    }
    }

    @media (min-width: 768px){.header-menu-cta .theme-btn--primary.btn.sqs-button-element--primary{
      padding: .1em 1em !important;
      font-size: 26px !important;
      border-radius: 100px !important;
      margin: 1px 1 !important; /* Adjust vertical margins */
      margin-left: auto !important;
      margin-right: auto !important;
      width: 250px !important;
      align-items: center;
      flex-wrap: wrap; /* Allow items to wrap if needed */
      gap: 1em; /* Adjust the gap between flex items if needed */
      text-align: center !important;
    }

    div.container.header-menu-nav-item>a {
      color: #fff !important;
      background-color: #686beb !important;
      padding: .1em 1em !important;
      font-size: 26px !important;
      border-radius: 100px !important;
      margin: 10px 0 !important; /*   Adjust vertical margins */
      margin-left: auto !important;
      margin-right: auto !important;
      width: 200px;
      align-items: center;
      display: flex;
      justify-content: center; /* Center horizontally */
      flex-wrap: wrap; /* Allow items to wrap if needed */
      text-align: center !important;
    }
    }

     

    /* Ensure button is visible on mobile by default */
    .expand-widget {
        display: inline-block; /* Adjust as necessary */
        background: none;
        border: none;
        cursor: pointer;
    }

    header#header {
        background: #FFFFFF !important; /* Sets the background to white */
    }


    /* Hide button on screens wider than 768px */
    @media (min-width: 768px) {
        .expand-widget {
            display: none;
        }
    }
    }

  2. I'm trying to set the subject field of a Squarespace form from a script, I verified that the subjectInput is valid, and I verified that the tree name is properly being fetched. (Model ID from URL parameter > Sketchfab API Model Name)

    But the string simply isn't setting, I don't see it visibly in the form itself, nor is it being sent in the final email after I click submit. I'm placing this in the Advanced Code section of the page. Here's the exact URL, password is known:

    https://www.localplantsupply.com/tree-d-viewer?model=ac03983731014985b3998918dbb72f8e&images=https%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2Fc1dbe4d3-841b-42b0-a250-c82befc9a8db%2Fyucca1.jpg%2Chttps%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2F46b707f7-7c83-4eb0-ad4d-5d84fcdf7e30%2Fyucca2.jpg%2Chttps%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2F69de31c1-556c-409f-bbe3-5b380c493af8%2Fyucca3.jpg
     

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        var buyButton = document.getElementById('block-yui_3_17_2_1_1710424833282_7130');
        var form = document.getElementById('block-yui_3_17_2_1_1710417003580_7008');
        var subjectInput = document.getElementById('text-yui_3_17_2_1_1710417041309_2398-field');

        async function fetchTreeName() {
            const modelId = new URLSearchParams(window.location.search).get('model');
            if (modelId) {
                const modelDetailsUrl = `https://api.sketchfab.com/v3/models/${modelId}`;
                try {
                    const response = await fetch(modelDetailsUrl);
                    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                    const modelData = await response.json();
                    return modelData.name; // Assuming this is where the tree name is stored
                } catch (error) {
                    console.error('Error fetching model details:', error);
                    return "Unknown Tree";
                }
            }
        }

        function changeValue(input, value) {
            var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
            nativeInputValueSetter.call(input, value);

            var inputEvent = new Event("input", { bubbles: true });
            input.dispatchEvent(inputEvent);
        }

        buyButton && buyButton.addEventListener('click', async function(event) {
            event.preventDefault();
            const treeName = await fetchTreeName();
            const inquiryDate = new Date().toISOString();
          console.log(treeName);
                  form.style.display = form.style.display === "none" || form.style.display === "" ? "block" : "none";
          
            if(subjectInput) {
                console.log("Subject is valid");
                changeValue(subjectInput, `Inquiry for ${treeName} - ${inquiryDate}`);
            }
        });
    });
    </script>

  3. @Ziggymy logo on desktop and mobile is still off center with the following CSS:

    <style>
    .burger-box , .header-burger , .header-nav , .sqs-button-element--primary {
        display:none !important;
      }
    </style>

    I am going to switch it back to visibility:hidden temporarily as I'd rather have it invisible and clickable than an off center logo until I have a working fix. On desktop it shifts to the left, on mobile it shifts to the right. I tried a few things from other forum posts here but none are working for me. Thanks in advance!

  4. Its working in desktop as desired but on mobile when clicked there's no left right arrows that indicate you can go to the next image, nor is the metadata with the tree details visible once clicked into the image.

    Here's one of a few examples from the website, password is known

    https://www.localplantsupply.com/fresh-feed-landscape-professionals

  5. @sasankayyodI got here because my Sketchfab embed was cropping, what worked for me was custom CSS that set the width and height based off the ID of the code block.

    <style>
    .sketchfab-embed-wrapper iframe {
        width: 100%;
        height: 500px; /* or any other height */
    }
    </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.