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

[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?

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts