method

Hi @CarlyC it's due to this line: .sqs-block-button a, [class*='button'], [class*='btn'] [class*="button"] is targeting any element (or descendants of) with a class name containing "button". Which is the whole site essentially as the document body includes several matching classes. Solution: increase the specificity of this code so you only target buttons

@nmilc I can't really troubleshoot much further without seeing the code you're adding to your site, feel free to pm me a link if you can and I'll take a look!

Thanks okay, with the new layout just remove that second part of the code (updated above) – that was purely for the tablet scaling.

Hey! Try it now, I've added a couple !important's in there

Hi @Bauyu Try adding this into your Custom CSS, it will apply to all iframe embeds with a square aspect ratio .embed-block iframe[src][height="476"][width="476"] { @supports (aspect-ratio: 1/1) { width: 100% !important; height: 100% !important; aspect-ratio: 1/1; } } Let me know how it goes!

Have you tried using a fetch request to handle the retrieval and parsing of the json file?

Hi @NomadicPB I'm not 100% clear on what you're asking for exactly, but I'll take an educated guess. If you change the width in this part of your styling to be 100% it'll ensure the diagram will be responsive and scale to the current browser width. As opposed to always being 1100px wide. .diagramContainer { position: relative; aspect-ratio: 3 / 2; width: 100%; margin: auto; z-index: 2; } Hope that helps!

Hi @nmilc I don't believe there's an issue using appendChild, just the way you're trying to create a document inside a code block and then append elements into it. I'd recommend adding a placeholder element into the code block to add these items into. Restructure your code to look like this: <h1>Results: </h1> <div class="results"></div> <script src="jquery-3.6.0.js"></script> <script> // Initialization clear console.clear(); // GET SECTION: Retrieves and populates information on available cases const getSettings = { "async": true, "crossDomain": true, "url": "method": "GET", "headers": { "Content-Type": "application/json", "Authorization": } }; // PATH SECTION, TAKE: Takes opportunity when button is clicked const claimSettings = { "async": true, "crossDomain": true, "method": "PATCH", "headers": { "Content-Type": "multipart/form-data", "Authorization": }, "processData": false, "contentType": false, "mimeType": "multipart/form-data", "data": form }; // PATCH SECTION, RELEASE: Releases opportunity when button is clicked const releaseSettings = { "async": true, "crossDomain": true, "method": "PATCH", "headers": { "Content-Type": "multipart/form-data", "Authorization": }, "processData": false, "contentType": false, "mimeType": "multipart/form-data", "data": form }; $.ajax(getSettings).done(function (response) { const results = document.querySelector(".results") // Iterates through each of the cases let numCases = response.results.length; for (let i = 0; i < numCases; i++) { // Populates array of case numbers idArray[i]=response.results[i].id.raw_value; // Creates basic HTML elements on page let nameEl = document.createElement("h2"); nameEl.innerHTML = "Case Number: " + idArray[i]; let lpcEl = document.createElement("h3"); let availEl = document.createElement("h3"); let descripEl = document.createElement("h4"); let claimBtn = document.createElement("button"); let releaseBtn = document.createElement("button"); // Adds all relevant HTML elements to document results.appendChild(nameEl); results.appendChild(availEl); results.appendChild(lpcEl); results.appendChild(descripEl); results.appendChild(claimBtn); results.appendChild(releaseBtn); } }) </script> Let me know how that goes!

Hi @JJmax The space is there because some of your added button styling is affecting the hidden screenreader link in the header. Add this code below to your Custom CSS and it should resolve the issue! .header .header-skip-link { position: absolute !important; }

Hi @waypoint This is the code you need, add it into your Custom CSS panel. body:not(.sqs-edit-mode-active) { overflow-x: hidden; // full width blocks #block-yui_3_17_2_1_1533160323790_11724, #block-yui_3_17_2_8_1471981268301_7054 { position: relative; width: 100vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } // extra space for slideshow controls #block-yui_3_17_2_1_1533160323790_11724 .sqs-gallery-controls { .next { right:2rem; } .previous { left: 2rem; } } } If you need to make more blocks full width, you can do this by finding and adding the block ID to the code