[Support request] CSS not working after moving to Child Theme

Home Forums Support [Support request] CSS not working after moving to Child Theme

Home Forums Support CSS not working after moving to Child Theme

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #821267
    Vish

    Hello

    Previously, I had around 900 lines of CSS all added via the built-in additional CSS option. I recently moved to a child theme (Copy/Pasted all the 900 lines into styles.css).

    While most of the code worked fine, there were some CSS properties which required adding !important at the end to act properly.

    But the below piece of CSS to set the Slideout Navigation to Full Width, provided by David, was working fine until it was moved to a child theme. But it doesn’t work anymore with the Child Theme.

    @media (max-width: 768px) {
    
        .offside--left.is-open,
        .offside-js--is-left .offside-sliding-element {
            -webkit-transform: translate3d(100vw, 0, 0);
            -moz-transform: translate3d(100vw, 0, 0);
            -ms-transform: translate3d(100vw, 0, 0);
            -o-transform: translate3d(100vw, 0, 0);
            transform: translate3d(100vw, 0, 0);
        }
    
        .offside--right.is-open,
        .offside-js--is-right .offside-sliding-element {
            -webkit-transform: translate3d(-100vw, 0, 0);
            -moz-transform: translate3d(-100vw, 0, 0;
            -ms-transform: translate3d(-100vw, 0, 0);
            -o-transform: translate3d(-100vw, 0, 0);
            transform: translate3d(-100vw, 0, 0);
        }
    
        .main-navigation.offside {
            width: 100vw;
        }
    
        .offside--left {
            left: -100vw;
        }
    
        .offside--right {
            right: -100vw;
        }
        .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
            right: auto ;
        }
        .offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
           left: auto ;
        }
    }

    I tried adding !important to every single line in the above CSS to see if it would work, but nope, it doesn’t.

    Any idea how to resolve this?

    #821438
    Leo
    Staff
    Customer Support

    Hi there,

    Looks like it’s getting overwritten by your own CSS.

    For example, this one in the code above:

    .offside--left.is-open,
        .offside-js--is-left .offside-sliding-element {
            -webkit-transform: translate3d(100vw, 0, 0);
            -moz-transform: translate3d(100vw, 0, 0);
            -ms-transform: translate3d(100vw, 0, 0);
            -o-transform: translate3d(100vw, 0, 0);
            transform: translate3d(100vw, 0, 0);
        }

    Is getting overwritten by

    #generate-slideout-menu {
        -webkit-transition: -webkit-transform .2s cubic-bezier(.16,.68,.43,.99);
        -moz-transition: -moz-transform .2s cubic-bezier(.16,.68,.43,.99);
        -o-transition: -o-transform .2s cubic-bezier(.16,.68,.43,.99);
        transition: transform .4s cubic-bezier(.16,.68,.43,.99);
    }

    If you right click on the element, you should be able to see the issue:
    https://www.screencast.com/t/IoEKxbOQdaf0

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.