Widle

@tuanphan This is regarding the Event Listing Page. I’m working on adding two buttons to the page and believe I've found a solution. I appreciate your prompt response and support—it means a lot to us.

Hello,

I would like to add a second button on my event page that opens a popup widget containing the Eventbrite embed code when clicked. Could you please provide the custom code required to achieve this in Squarespace?

Thank you in advance.

Hello , I want back button in checkout page. It is possible ? If possible you can share custom code or Optional (third party plugin) for this .

Thank you in advance.

In email campaigns, custom CSS is not provided, but you can resize and enhance your logo through the available design settings.

try this code 

.Header-nav-folder
{
padding:0px!important;
}

hello @Mathias654321

try this code 

.Header-nav-folder-item:hover
{
background-color:#cff491;
}

Hello @GregOvens try this code 

 

@media (min-width: 768px) {
  #block-yui_3_17_2_1_1714385759270_25383 .a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
    font-size: 1.6rem !important;
}
}

hello @Mathias654321

using this CSS code

.medium-button-style-raised .sqs-block-button .sqs-block-button-element--medium:hover
{
background-color:#cff491;
}

Try this code 

a.Header-nav-folder-title {
    letter-spacing: 32px;
}

hello @jasonconway

Are you utilizing email campaigns? If so, you can set default components. I can provide a screenshot to illustrate how this is done.

try this code using important Properties

@media only screen and (max-width: 600px) {
 .ProductItem-nav .ProductItem-nav-breadcrumb, .ProductItem-nav .ProductItem-nav-pagination {
    display: block!important;
    color: black!important;
    padding: 37px 2px;
}
}

Try this code in Website tools >> custom css

 

@media only screen and (max-width: 600px) {
 .ProductItem-nav .ProductItem-nav-breadcrumb, .ProductItem-nav .ProductItem-nav-pagination {
    display: block;
    color: black;
    padding: 37px 2px;
}
}

hello @JasmineFoster
I believe the URL you provided may be incorrect. I have found a potential site that might be relevant: https://theenrichededucator.com/. Please check this link to see if it aligns with your needs.

Hello @VeeBee

Please consider using this style option to modify the mobile view I'll send you a screenshot

Alternatively, please use this CSS code.

.Mobile-menu {
    background-color: #your-color-code;
}
.Mobile-menu .Mobile-nav-item {
    font-size: your-desired-size; /* Example: 16px */
}
.Mobile-menu {
    background-image: url('your-image-url');
    background-size: cover; 
}
.Mobile-menu {
    padding-top: 10px; 
}

.Mobile-nav-item {
    margin-top: 0; 
}
.contact-button {
    display: block;
    padding: 10px;
    background-color: #your-color;
    color: #fff;
    text-align: center;
    margin-top: 20px; /* Adjust as needed */
}

Javascript code

 

<script>
document.addEventListener('DOMContentLoaded', function() {
    var menu = document.querySelector('.Mobile-menu');
    if (menu) {
        var contactButton = document.createElement('a');
        contactButton.href = '#contact'; // Adjust link as needed
        contactButton.textContent = 'Contact';
        contactButton.className = 'contact-button'; // Add class for styling
        menu.appendChild(contactButton);
    }
});
</script>

Hi @deerdeerdeer This may work as a solution with the right styling.

Check out this url  https://schwartz-edmisten.com/blog/text-and-image-hover-layout-in-squarespace-71

Hello @IndusSociety

Yes, it is indeed possible to achieve this using custom CSS. I can provide you with the necessary code to assist you.

.shrink .header-nav * {
    color: #000000 !important;
}

.header img {
  filter: brightness(50%); /* Darker image when scrolled */
}

@media screen and (max-width:991px) {
    .header-nav {
    display: none;
}
.header-actions {
    display: none;
}
.header-burger {
  display: flex;
}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

Try this code in website tools >> custom css

hello @Wild_Macro

hello @SCAgency

Inspect Existing Styles: Utilize your browser’s Developer Tools (right-click the element and select "Inspect") to review and identify any existing borders or outlines applied through CSS.

Override with Custom CSS: Apply the following CSS to remove existing borders and apply your desired border: 

.your-element-class {
  border: none !important;
  outline: none !important;
}

/* Apply custom border */
.your-element-class {
  border: 2px solid #yourcolor;
}

Cover with Background Layers: If borders remain visible, use a background layer to obscure them:
 

.your-element-class {
  position: relative;
}

.your-element-class::before {
  content: "";
  position: absolute;
  top: -2px; 
  left: -2px;
  right: -2px;
  bottom: -2px;  
  background-color: #yourcolor; 
  z-index: -1;
}

hello @MoeTalks

It seems you're having trouble uploading or linking a video with a song on Squarespace. Here are some steps to troubleshoot and resolve the issue:

1. Check Video Format: Ensure the video format (e.g., MP4) is supported by Squarespace.
2. Verify the Link: Confirm the video link is correctly formatted and accessible. Ensure privacy settings on platforms like YouTube or Vimeo allow embedding.
3. Replace the Link: Try using a different link or re-upload the video.
4. Clear Cache: Clear your browser's cache and cookies or try an incognito window or a different browser.
5. Check Size and Duration: Ensure the video meets file size and duration limits.
6. Check for Issues: Verify if Squarespace is experiencing technical problems by checking their Status Page.
7. Different Device/Network: Try uploading from another device or network.

If changing the song is an option and you suspect it's causing the issue, try using a different track. If the problem persists, consider reaching out to Squarespace Support for further assistance.

Hello @yooper906 Can you share your site url ?

hello @CCCathedral

To resolve issues with image uploads on Squarespace, please follow these troubleshooting steps:

1. Check the File Name: Ensure the image file name is unique. Conflicts can occur if the file name matches that of an existing image.

2. Clear Browser Cache: Clear your browser's cache and cookies. Alternatively, try uploading the image in an incognito window.

3. Rename the File: Rename the image file on your computer and attempt the upload again.

4. Check for Existing URLs: Navigate to the location on your Squarespace site where the image might have been previously uploaded. Verify if an image with the same URL or path exists and remove it if necessary.

5. File Size and Format: Confirm the image is in the correct format (JPEG) and within Squarespace's size limits. Large files can sometimes cause upload issues.

6. Check Squarespace Status: Occasionally, Squarespace may experience technical difficulties affecting uploads. Check the Squarespace Status Page for any ongoing issues.

If these steps do not resolve the issue, try uploading the image from a different device or network to rule out any local network or device-specific problems.

@media screen and (max-width: 767px) {
    iframe[src*="youtube"] {
        width:100% !important
    }
}

Try this code Otherwise you can try Video Block then use Custom Featured Image like this image 

hello @gafitz

Please update your CSS with the following:
 

.sqs-lightbox-image, .lightbox-image {
    max-width: 90vw; 
    width: 90vw; 
    height: auto;
    margin: 0 auto; 
}


.sqs-lightbox-container, .lightbox-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sqs-lightbox-overlay, .lightbox-overlay {
    background: rgba(0, 0, 0, 0.8); 
}