Custom class is being split and applied in different forms

[Bross]

I’m having trouble with
I created a custom class with a default followed by conditional variations based on the containers orientation and size using @container. When Wix renders the code it splits my single element into outer and inner divs and applies the default version to the outer div and the conditional version to the inner div causing several issues.

Working in
I am working in WIX Studio Editor and the WIX IDE, checking the output using

Site link

Home | Benjamin Ross Portfolio

What I’m trying to do
I am hoping to get my styles applied correctly so everything looks right.

What I’ve tried so far
I have tried adjusting the element size, adjusting the location of the css variables, using the important tag, checked for conflicts in the editor settings.

Extra context
Below you can see the misaligned corner radius.

Here is what the structure looks like in Wix Studio:

NOTE: the “innerWrap” show here is NOT the the wix “inner-box” element that is causing the issue.

And here is what I see in the inspection panel:

Outer Div:

Inner-Box

[noahlovell]

Can you share the CSS that you are using?

[Bross]

Sure thing. There is a bit though.

:root{
    --c-glass: #bbbbbc;
    --c-light: #fff;
    --c-dark: #000;
    --c-bg: #fCFCFC;
    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;
    --saturation: 150%;
    --fontColorLight: #444;
    --fontColorDark: #fefefe;
    --outerBorderRadii: 60px;
    --innerBorderRadii: 44px;
    --cardPadding:16px 16px 16px 16px;
    --cardTextPadding:16px 20px 12px 20px;

}
/********** Topic Tiles **********/
/********** Topic Tiles **********/
.topicTileWrap {
    transition: all ease-out 0.5s;
}

.topicTile {
    box-shadow:
        -8px 16px 24px rgba(0, 0, 0, 0.05),
        -6px 12px 18px rgba(0, 0, 0, 0.06),
        -4px 8px 12px rgba(0, 0, 0, 0.1),
        -2px 4px 6px rgba(0, 0, 0, 0.2),
        -1px 2px 3px rgba(0, 0, 0, 0.2),
        inset -6px 8px 24px rgba(0, 0, 0, 0.04),
        inset 6px -8px 16px rgba(255, 255, 255, 0.4),
        inset -1.8px 3px 2px rgba(255, 255, 255, 0.2),
        inset -1.8px -7px 6px rgba(255, 255, 255, 0.2),
        inset 1px -2px 2px rgba(0, 0, 0, 0.4);
}

.topicTileFill {
    top: 50%;
    left: 50%;
    opacity: 0;
    height: 0;
    width: 0;
    filter: blur(12px);
    background: linear-gradient(
        to bottom,
        rgba(235, 243, 243, 0.5) 0%,
        rgba(141, 204, 201, 0.5) 90%,
        rgba(105, 199, 188, 0.5) 100%
    );
    transition: all ease-out 0.5s;
}

.topicTileWrap:hover {
    transform: scale(1.1);
    translate: 0 -4px;
    box-shadow: 0 0 12px  rgba(158, 222, 219, 0.05), 0 0 24px  rgba(134, 199, 196, 0.04), 0 0 48px  rgba(113, 162, 159, 0.02);
}

.topicTileWrap:hover .topicTileFill {
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    opacity: 1;
    translate: 0 -4px;
}

/********** GLass Cards **********/

.glassCard{
    margin: 0;
    border-radius: var(--outerBorderRadii);
    box-shadow:
    -1px 2px 2px rgba(0, 0, 0, 0.4),
    -2px 4px 8px rgba(0, 0, 0, 0.2),
    -4px 8px 12px rgba(0, 0, 0, 0.1),
    -6px 12px 16px rgba(0, 0, 0, 0.06),
    -8px 16px 24px rgba(0, 0, 0, 0.05) !important;
    transition: all ease-out 0.5s;
    overflow: visible;
    container: glassCard / size;
}
.gcInnerWrap{
    max-height: 100% !important;
    margin: 0;
    border-radius: var(--outerBorderRadii);
    padding: var(--cardPadding);
    background: linear-gradient(30deg, rgba(255, 255, 255, 0) 23%, rgba(255, 255, 255, 0.2) 90%),
        rgba(34, 34, 34, 0.5);
    box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset -1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset 1px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 40%), transparent),
    inset 1.8px -7px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset 0.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset 1px 2px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 1px 3px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset -1px -4.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 1px 5px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent),
    0 6px 16px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent) !important;
}
.gcCol-L{
    margin: 0;
    padding: var(--cardTextPadding);
}
.gcCol-R{}
.gcTextWrap{}
.gcTextBlock{}
.gcButton{}

.gcThumb{
    border-radius: var(--innerBorderRadii);
    overflow: hidden;
    box-shadow: -6px 8px 8px rgba(0, 0, 0, 0.08), -2px 6px 6px rgba(0, 0, 0, 0.08), -1px 2px 2px rgba(0, 0, 0, 0.24);
    transition: box-shadow ease-out 0.3s;
}
.gcCol-R::after{
    border-radius: var(--innerBorderRadii);
    content: "";
    position: absolute;
    left: 1px;
    top: -1px;
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    background: linear-gradient(190deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);}


.glassCard:Hover{
        box-shadow:
        -14px 14px 10px rgba(0, 0, 0, 0.2),
        -18px 36px 36px rgba(0, 0, 0, 0.1),
        -36px 72px 64px rgba(0, 0, 0, 0.05),
        -54px 96px 96px rgba(0, 0, 0, 0.04),
        -72px 119px 128px rgba(0, 0, 0, 0.03) !important;
        transform: scale(1.1);
        translate: 12px 12px;
        z-index: 200000;
}
.glassCard:Hover .gcCol-R::after{
    left: -1px;
    top: 1px;
    background: linear-gradient(30deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}


.glassCard:hover .gcThumb{
    box-shadow:
        -0.5px 1px 0.5px rgba(255, 255, 255, 0.3),
        -0.5px 1px 1px rgba(255, 255, 255, 0.3),
        0.5px -1px 1px rgba(0, 0, 0, 0.3),
        inset -12px 14px 16px rgba(0, 0, 0, 0.08),
        inset -8px 10px 12px rgba(0, 0, 0, 0.08),
        inset -4px 6px 12px rgba(0, 0, 0, 0.24) !important;
        }

/********** CONTAINERS **********/
/**** HORIZONTAL ****/
@container glassCard (orientation: landscape)/*HORIZONTAL*/ {
    .gcInnerWrap{
        grid-template-columns: 1.1fr 1fr !important;
        grid-template-rows: 1 !important;
    } 
    .glassCard,
    .gcInnerWrap {
        min-width: 260px !important;
        min-height: 100px !important;
    }
}
/*XLARGE*/
@container glassCard (orientation: landscape) and ((width > 556px) or (height > 265px)) {
    :root {
        --outerBorderRadii: 60px !important;
        --innerBorderRadii: 44px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        --cardTextPadding: 16px 20px 12px 20px !important;
    }
    
    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 60px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 2.1 / 1 !important; */
    }

    .gcCol-L{
        --cardPadding: 18px 18px 18px 18px !important;
        padding: var(--cardTextPadding) !important;
    }


    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 44px !important;
        border-radius: var(--innerBorderRadii) !important;
    }
}
/*LARGE*/
@container glassCard (orientation: landscape) and  ((width <= 556px) or (height <= 265px)) {
    :root {
        --outerBorderRadii: 60px !important;
        --innerBorderRadii: 44px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        --cardTextPadding: 16px 20px 12px 20px !important;
    }
    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 60px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 2.1 / 1 !important; */
    }
    .gcCol-L{
        --cardPadding: 18px 18px 18px 18px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 44px !important;
        border-radius: var(--innerBorderRadii) !important;
    }
}
/*MEDIUM*/
@container glassCard (orientation: landscape) and ((width <= 462px) or (height <= 220px)) {
    :root {
        --outerBorderRadii: 48px !important;
        --innerBorderRadii: 32px !important;
        --cardPadding: 14px 14px 14px 14px !important;
        --cardTextPadding: 14px 18px 12px 18px !important;
    }
    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 48px !important;
        --cardPadding: 14px 14px 14px 14px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 2.1 / 1 !important; */
    }
    .gcCol-L{
        --cardTextPadding: 14px 18px 12px 18px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 32px !important;
        border-radius: var(--innerBorderRadii) !important;
        
    }
}
/*SMALL*/
@container glassCard (orientation: landscape) and ((width <= 364px) or (height <= 140px)) {
    :root {
        --outerBorderRadii: 32px !important;
        --innerBorderRadii: 20px !important;
        --cardPadding: 12px 12px 12px 12px !important;
        --cardTextPadding: 2px 8px 2px 8px !important;
    }
    .gcInnerWrap{
        grid-template-columns: 1.8fr 1fr !important;
        grid-template-rows: 1 !important;
    } 
    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 32px !important;
        --cardPadding: 12px 12px 12px 12px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 2.6 / 1 !important; */
    }
    .gcCol-L{
        --cardTextPadding: 2px 8px 2px 8px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 20px !important;
        border-radius: var(--innerBorderRadii) !important;
    }

    .gcInnerWrap {
        grid-template-columns: 1.6fr 1fr !important;
    }
    .gcButton,
    .cardTagline {
        visibility: collapse;
        display: none;
    }
}
/*xs*/
@container glassCard (orientation: landscape) and ((width = 260px) or (height = 100px)) {
    :root {
        --outerBorderRadii: 200px !important;
        --innerBorderRadii: 200px !important;
        --cardPadding: 12px 12px 12px 12px !important;
        --cardTextPadding: 4px 8px 4px 8px !important;
    }
    .gcInnerWrap{
        grid-template-columns: 2.1fr 1fr !important;
        grid-template-rows: 1 !important;
    } 
    .glassCard, .gcInnerWrap {
        --outerBorderRadii: 200px !important;
        --cardPadding: 12px 12px 12px 12px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 2.6 / 1 !important; */
    }
    .gcCol-L{
        --cardTextPadding: 4px 8px 4px 8px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 200px !important;
        border-radius: var(--innerBorderRadii) !important;
    }

    .gcInnerWrap {
        grid-template-columns: 1.6fr 1fr !important;
    }
    .gcButton,
    .cardTagline {
        visibility: collapse;
        display: none;
    }
}

/**** VERTICAL ****/
@container glassCard (orientation: portrait) /*VERTICAL*/ {
    /* :root {
        --outerBorderRadii: 60px !important;
        --innerBorderRadii: 44px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        --cardTextPadding: 16px 20px 12px 20px !important;
    } */
    .glassCard {
        min-width: 180px !important;
        min-height: 288px !important;
    }

    .gcInnerWrap{
        align-self: stretch;
        grid-template-columns: 1fr !important;
        grid-template-rows: 1.25fr 1fr !important;

    } 

    .gcCol-L {
        grid-area: 2 / 1 / 3 / 3 !important;
    }
    .gcCol-R {
        grid-area: 1 / 1 / 2 / 3 !important;
    }
}
/*XLARGE*/
@container glassCard (orientation: portrait) and ((width > 320px) or (height > 490px)) {
    :root {
        --outerBorderRadii: 60px !important;
        --innerBorderRadii: 44px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        --cardTextPadding: 16px 20px 12px 20px !important;
    }

    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 60px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 1 / 1.53 !important; */
    }
    .gcCol-L{
        --cardTextPadding: 16px 20px 12px 20px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 44px !important;
        border-radius: var(--innerBorderRadii) !important;
    }

}

/*LARGE*/
@container glassCard (orientation: portrait) and ((width <= 320px) or (height <= 490px)) {
    :root {
        --outerBorderRadii: 60px !important;
        --innerBorderRadii: 44px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        --cardTextPadding: 16px 20px 12px 20px !important;
    }
    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 60px !important;
        --cardPadding: 18px 18px 18px 18px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 1 / 1.53 !important; */
    }
    .gcCol-L{
        --cardTextPadding: 16px 20px 12px 20px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 44px !important;
        border-radius: var(--innerBorderRadii) !important;
    }
}
/*MEDIUM*/
@container glassCard (orientation: portrait) and ((width <= 281px) or (height <= 430px)) {
    :root {
        --outerBorderRadii: 48px !important;
        --innerBorderRadii: 32px !important;
        --cardPadding: 14px 14px 14px 14px !important;
        --cardTextPadding: 14px 18px 12px 18px !important;
    }
    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 48px !important;
        --cardPadding: 14px 14px 14px 14px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 1 / 1.6 !important; */
    }
    .gcCol-L{
        --cardTextPadding: 14px 18px 12px 18px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 32px !important;
        border-radius: var(--innerBorderRadii) !important;
    }
        .gcButton, .cardTagline{
        visibility: collapse;
        display: none;
    }
}
/*SMALL*/
@container glassCard (orientation: portrait) and ((width <= 220px) or (height <= 352px)) {
    :root {
        --outerBorderRadii: 32px !important;
        --innerBorderRadii: 20px !important;
        --cardPadding: 12px 12px 12px 12px !important;
        --cardTextPadding: 12px 16px 8px 16px !important;
    }
    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 32px !important;
        --cardPadding: 12px 12px 12px 12px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 1 / 1.6 !important; */
    }
    .gcCol-L{
        --cardTextPadding: 12px 16px 8px 16px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 20px !important;
        border-radius: var(--innerBorderRadii) !important;
    }

    .gcInnerWrap {
        grid-template-columns: 1.6fr 1fr !important;
    }
    .gcButton,
    .cardTagline {
        visibility: collapse;
        display: none;
    }
}
/*xs*/
@container glassCard (orientation: portrait) and ((width = 180px) or (height = 288px)) {
    :root {
        --outerBorderRadii: 200px !important;
        --innerBorderRadii: 200px !important;
        --cardPadding: 12px 12px 12px 12px !important;
        --cardTextPadding: 8px 12px 4px 12px !important;
    }
    .glassCard,
    .gcInnerWrap {
        --outerBorderRadii: 200px !important;
        --cardPadding: 12px 12px 12px 12px !important;
        border-radius: var(--outerBorderRadii) !important;
        padding: var(--cardPadding) !important;
        /* aspect-ratio: 1 / 1.6 !important; */
    }
    .gcCol-L{
        --cardTextPadding: 8px 12px 4px 12px !important;
        padding: var(--cardTextPadding) !important;
    }
    .gcCol-R::after, .gcThumb{
        --innerBorderRadii: 200px !important;
        border-radius: var(--innerBorderRadii) !important;
    }

    .gcInnerWrap {
        grid-template-columns: 1.6fr 1fr !important;
    }
    .gcButton,
    .cardTagline {
        visibility: collapse;
        display: none;
    }
}

[Bross]

@noahlovell did that all come through?

[noahlovell]

Taking a look at everything (taking into consideration I don’t know the CSS as well as you/what the final outcome should look like) - it seems this is an effect of overriding the border radius at various points within the CSS.

Have you got a demo/screenshot of the intended outcome?

[Bross]

Hey @noahlovell I have been trouble shooting this ALL DAY! I came to the conclusion that the issue is with my implementation of CSS grid and not specifically a WIX issue, but I have not been able to figure out what I need to do to fix it.

Here is the closest I have gotten so far:

External Media

[noahlovell]

There sounds like it could be it!

As a general rule of thumb, I would recommend that if the editor is capable of doing it, to use that over CSS. In this case, CSS grid is fully supported - Studio Editor: Working with an Advanced CSS Grid | Help Center | Wix.com - so is likely to have a better effect than the CSS

[Bross]

Thanks @noahlovell, I have tried having the WIX UI handle most of the CSS Grid work. Unfortunately, I need grid properties to change as the ELEMENT resizes, not the screen. If there is a way to do that in the WIX UI, I couldn’t find it.