CODEWITHSUNDEEP
htmlcss
user7124880
user7124880

Reputation: 3

Responsive transitions and changing absolute positions

Using this original code: https://codepen.io/marcelo-ribeiro/pen/xOOKpO. We have 4 divs placed in each corner of the screen, when any div is clicked then there is a transition showing the div growing into the full screen.

&:first-child {
    top: 0;
    left: 0;
    background: nth($section-colors, 1);
}

&:nth-child(2) {
    top: 0;
    left: 50%;
    background: nth($section-colors, 2);
}

&:nth-child(3) {
    top: 50%;
    left: 0;
    background: nth($section-colors, 3);
}

&:nth-child(4) {
    top: 50%;
    left: 50%;
    background: nth($section-colors, 4);
}

I wanted to edit the layout, so it's responsive when the width changes under 800px. So now the layout should have four divs, with each div stacked on top of each other: https://codepen.io/anon/pen/QmMMJN

@media (max-width:800px) {
    .#{$section-class} {
        width: 100%;
        height: 25%;

        &:first-child {
            top: 0;
            left: 0;
        }

        &:nth-child(2) {
            top: 25%;
            left: 0%;
        }

        &:nth-child(3) {
            top: 50%;
            left: 0;
        }

        &:nth-child(4) {
            top: 75%;
            left: 0%;
        }
    }
}

But with the new positioning for the new layout, the transition does not work properly, as the divs doesn't expand over the divs placed before the one that's clicked.

Any ideas why?

Upvotes: 0

Views: 34

Answers (1)

Facundo Corradini
Facundo Corradini

Reputation: 3913

Specificity and cascade.

The rules in your media query are taking priority over your $section-expanded-class rule, so the top keeps it's original value (0, 25%, 50%, 75%).

Lazy fix would be to add an !important to line 47 of your pen so it takes over.

&.#{$section-expanded-class} {
    top: 0 !important;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
  }

Upvotes: 1

Related Questions