css adaptations disappear on website the moment the edit window closes

Dear all,

I have added css to my website which works well when I have the edit window still open. Yet the moment I close it all changes made with css disappear. Does anyone know what the problem could be? I have not been able to figure out why for days... Hope someone can help me!

I added the following code in my css window:

@import url('https://use.typekit.net/hzf1jri.css');
@import url('https://use.typekit.net/mrc5ixf.css');


h1, h2, h3 {
    font-family: "ivyora-display", sans-serif;
    font-weight: 300;
    font-style: normal;
}


body {
    font-family: "lato", sans-serif;
    font-weight: 300;
    font-style: normal;
      size: 16px;
}


i {
    font-family: "lato", sans-serif;
    font-weight: 300;
    font-style: italic;
}


@media screen and (min-width: 768px) {
    .header-nav {
        display: none !important;
    }


    .header-burger {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding-left: 20px !important;
    }


    .header--menu-open .header-menu {
        opacity: 1 !important;
        visibility: visible !important;
        left: 0 !important;
        transition: all 0.5s ease-in-out !important;
    }

    body:not(.header--menu-open) .header-menu {
        left: -200% !important;
        transition: all 0.5s ease-in-out !important;
    }


    nav.header-menu-nav-list {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        width: 50%;
        padding: 0 20px;
    }


    .header-menu-bg.theme-bg--primary {
        display: flex !important;
        justify-content: space-between !important;
        width: 50% !important;
        padding: 20px;
    }


    .header-menu-nav-folder[data-folder="root"] {
        overflow: hidden !important;
        text-align: left !important;
    }


.header-menu-nav-item:first-child {
    border-top: 0.2px solid #1B2E38;
    margin-top: 10px;
}


.header-menu-nav-item {
    border-bottom: 0.2px solid #1B2E38;
    margin-bottom: 10px;
}

.header-menu-nav-item a {
    font-family: "lato", sans-serif !important;
    font-weight: 300 !important;
    font-size: 25px !important;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    color: #1B2E38 !important;
    margin-right: 50px;
    padding: 15px 0;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

}

#block-1d6d18b594432d88ebb0.video-block .video-player{
padding-bottom:100%
}

12 hours ago, Lynn_ said:

I have added css to my website which works well when I have the edit window still open. Yet the moment I close it all changes made with css disappear.

The CSS selectors are probably not specific enough to override the built-in Squarespace CSS.

The built-in Squarespace CSS will use selectors that are far more specific and so these will take priority over your CSS. For example, the size and color of the PDP product title will use ".ProductItem .ProductItem-details h1.ProductItem-details-title" and won't be override by CSS that simply refers to "h1". For more details, see CSS Specificity.

You may be able to override many of the font settings by appending !important like this:

font-family: "ivyora-display" !important;

However, do take care with this keyword as it may have undesired effects, overriding elements that you did not want to change 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️