Widle

Hello, I understand your concern. To revert an image to its original rectangular shape after applying a shape like a circle or starburst, follow these steps: Open the Image Editor: Click on the image you want to edit to open the image editor. Shape Option: Look for the option where you applied the shape. This is typically found under "Design" or "Image" settings. Clear Shape: While there may not be an explicit "rectangle" or "none" option, you can often find a "clear" or "reset" option to remove any applied shapes. If this isn't available: Select the closest shape option that doesn't require additional modifications (e.g., "square" if available). Save Changes: Save your changes and see if the image returns to its original rectangular form. If these steps don't resolve the issue, you might need to delete the image and re-upload it to reset all applied shapes and edits.

Try this code to add padding in text highlight span.sqsrte-text-highlight { padding: 12px; }

Hello @heatherjacksonio, Please update your CSS with the following: .header-menu-nav-wrapper { margin-top: 48px; }

@media only screen (min-width: 576px){ .Index-gallery-item-content-body a { font-size: 12px; } p:last-child{ font-size: 18px; } } Try this code

Hello @Graphixmain try this code in Website Tools >> Custom Css :not(.has-background) .section-background { background-image: url("YOUR_IMAGE_URL"); background-size: cover; /* Adjusts the image size to cover the entire element */ background-position: center center; /* Centers the background image */ background-repeat: no-repeat; }

Hello @BeMore use this CSS code to apply font on the navigation menu .header-menu-nav-item-content { font-family: Biago; }

Yes i try this but i want popup in this message

hello @Bluemonque @media only screen and (max-width:992px) { .header-actions-action.header-actions-action--cta.preFade.fadeIn { display: flex; flex-direction: column; gap: 10px; } } use this CSS

Hello @Rinde There are no issues in a phone to auto-play video re-check on your phone if not working on your phone remove cached files. Second, there are some Loading issues in the video, it has a high frame or quality that may be I can Send You a Video Recording. Screenrecorder-2024-07-22-16-10-09-310.mp4 That's my phone recording see minor video loading issues

Hello @jbphotoaz change in the style section second option - custom CSS .portfolio-text { } .portfolio-text * { } .portfolio-grid-overlay .grid-item .portfolio-text .portfolio-title { } using these classes to set font color & size second option

I want this type of pop-up message in form post submit message

Hello @bkiegaldie Try this code Website Tools >> Custom Css .gallery-reel-item img { padding: 0px; margin-left: 0px; margin-top: 0px; margin-bottom: 0px; width: 94% !important; height: 92%!important; border-radius: 10px; }

.form-field-shape-square.form-field-border-bottom .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]), .form-field-shape-square.form-field-border-bottom .sqs-block-form .form-item textarea, .form-field-shape-square.form-field-border-bottom .sqs-block-form .form-item .file-display, .form-field-shape-square.form-field-border-bottom .sqs-block-form .form-item select:hover{ background: yellow; } button.button.sqs-system-button.sqs-editable-button.form-submit-button.sqs-button-element--primary.none.ACgz1Ajag8FwXHpitNSi { padding: 15px 65px !important; } Try this on Website tools >> Custom Css

Welcome 👍@Barbi

.tweak-blog-masonry-text-alignment-center .blog-masonry .blog-meta-section { justify-content: center; padding: 29px 0px; } Try this in Website tools >> Custom Css

Can you share your site url ?

@jairobrito805 use this code website > Pages > Websites Tools > Custom Css #page { max-width: 1392px; margin-left: auto; margin-right: auto; } /* Optional: To set fixed margins */ body { padding-left: 20px; /* Adjust left padding */ padding-right: 20px; /* Adjust right padding */ }

Hello @LadyMeek don't use embed code using normal code Block and <div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%; height: auto;"> <iframe allowfullscreen="allowfullscreen" scrolling="no" class="fp-iframe" src="https://heyzine.com/flip-book/bbd6681174.html" style="border: 1px solid lightgray; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe> </div> <style> @media only screen and (max-width: 600px) { .fp-iframe { width: 100% !important; height: auto !important; } } </style> this code using Media Query

hello @emmamcburke Please Share your Site URL

Hello @zevinattisha Can you share your site URL?

use this code .sqs-block-image:hover .sqs-block-content { opacity: 1; visibility: visible; } .sqs-block-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); /* Adjust as needed */ color: #fff; /* Text color */ padding: 10px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1; }

Hello @MatRobi use this code to change the text color on the header website tool > Custom code

Hello @SmallSitesSarah index..html <!DOCTYPE html> <html> <head> <title>Lead Generation Form</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #leadForm { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; transition: transform 0.5s ease-in-out; } #leadForm.fade-out { transform: scale(0.5); opacity: 0; } label { display: block; margin-top: 10px; color: #333333; } input[type="text"], input[type="email"] { width: calc(100% - 20px); padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #28a745; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; width: 100%; font-size: 16px; } button:hover { background-color: #218838; } </style> </head> <body> <form id="leadForm"> <label for="petName">Pet name:</label> <input type="text" id="petName" name="petName"><br><br> <label for="gender">Gender:</label> <input type="text" id="gender" name="gender"><br><br> <label for="age">Age:</label> <input type="text" id="age" name="age"><br><br> <label for="weight">Weight:</label> <input type="text" id="weight" name="weight"><br><br> <label for="email">Your email address:</label> <input type="email" id="email" name="email"><br><br> <button type="submit">Submit</button> </form> <script> document.getElementById('leadForm').addEventListener('submit', function(e) { e.preventDefault(); const petName = document.getElementById('petName').value; const gender = document.getElementById('gender').value; const age = document.getElementById('age').value; const weight = document.getElementById('weight').value; const email = document.getElementById('email').value; // Store data in sessionStorage sessionStorage.setItem('petName', petName); sessionStorage.setItem('gender', gender); sessionStorage.setItem('age', age); sessionStorage.setItem('weight', weight); sessionStorage.setItem('email', email); // Add fade-out animation to the form document.getElementById('leadForm').classList.add('fade-out'); // Wait for animation to finish before redirecting setTimeout(function() { window.location.href = '/checkout'; // Update to the actual URL of your checkout page }, 500); // 0.5 second }); </script> </body> </html> in this code, the importance is // Wait for the animation to finish before redirecting setTimeout(function() { window.location.href = '/checkout'; // <<----Update to the actual URL of your checkout page }, 500); // 0.5 second this code updates the URL and Using the code Block not Using Default Form page and this is a checkout page <!DOCTYPE html> <html> <head> <title>Checkout Form</title> <style> body { font-family: Arial, sans-serif; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #checkoutForm { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); padding: 20px; width: 400px; opacity: 0; animation: fadeIn 1s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } label { display: block; margin-top: 10px; color: #333333; } input[type="text"], input[type="email"] { width: calc(100% - 20px); padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #007bff; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; width: 100%; font-size: 16px; } button:hover { background-color: #0056b3; } </style> </head> <body> <form id="checkoutForm"> <label for="email">Your email:</label> <input type="email" id="email" name="email"><br><br> <label for="name">Your name:</label> <input type="text" id="name" name="name"><br><br> <label for="petName">Pet name:</label> <input type="text" id="petName" name="petName"><br><br> <label for="species">Species:</label> <input type="text" id="species" name="species"><br><br> <label for="breed">Breed:</label> <input type="text" id="breed" name="breed"><br><br> <label for="gender">Gender:</label> <input type="text" id="gender" name="gender"><br><br> <label for="age">Age:</label> <input type="text" id="age" name="age"><br><br> <label for="weight">Weight:</label> <input type="text" id="weight" name="weight"><br><br> <label for="healthConcern">Your pet's health concern:</label> <input type="text" id="healthConcern" name="healthConcern"><br><br> <label for="medications">Current medications:</label> <input type="text" id="medications" name="medications"><br><br> <button type="submit">Checkout</button> </form> <script> window.onload = function() { // Retrieve data from sessionStorage const email = sessionStorage.getItem('email'); const petName = sessionStorage.getItem('petName'); const gender = sessionStorage.getItem('gender'); const age = sessionStorage.getItem('age'); const weight = sessionStorage.getItem('weight'); // Prefill the form document.getElementById('email').value = email || ""; document.getElementById('petName').value = petName || ""; document.getElementById('gender').value = gender || ""; document.getElementById('age').value = age || ""; document.getElementById('weight').value = weight || ""; // Log the retrieved data to the console console.log('Email:', email); console.log('Pet Name:', petName); console.log('Gender:', gender); console.log('Age:', age); console.log('Weight:', weight); } </script> </body> </html> https://fuchsia-amethyst-7bl9.squarespace.com/breeds - my demo site password - demo

Hello @AnnaJacobs @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance:none) { .sqs-block-social a { -webkit-transform: translateZ(0); transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } } } .sqs-block-social a svg { -webkit-transform: translateZ(0); transform: translateZ(0); image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; -webkit-backface-visibility: hidden; } Using this CSS Code

Hello @MoeTalks Your site password is Not Working But I have a Solution For You may Be issues with your Video Frame Check Your Video Frame