CODEWITHSUNDEEP
htmlcsssass
brent_white
brent_white

Reputation: 1019

Right positioning refusing to work

At the moment I'm working on a feature for my site where three circles transition into a new configuration at 900px. I have the circles working and they are all responsive which is good.

My plan is at 900px each circle will transform to a new configuration.

The blue circle circle2 will be on the left, the magenta circle circle1 will be on the right and the yellow circle circle3 will be directly underneath and centered between circle1 and circle2. I'm able to achieve transitioning circle1 and circle2 to the left and circle3 to the bottom.

The issue I'm having is when I attempt to transition circle3 to the right to center up with circle1 and circle2 and no matter what I do circle3 will not move to the right. This may be because I have relative positioning set on circle1 which I am extending to all the other circles with scss.

I think my issue has something to do with this post on right positioning refusing to apply.

Can someone please explain to me why the right positioning property is refusing to work??

Please check out my Codepen

@mixin transitions {
  transition: top .5s linear, bottom .5s linear, left .5s linear, right .5s linear;
}

.circles {
   display: flex;
   justify-content:center;
}
 .circle1 {
    display: flex;
    position: relative;
    justify-content:center;
    border-radius:50%;
    padding-bottom:30%;
    height:0;
    width: 30%;
    margin:5px;
    background-color:magenta;
    right:0;
    left:0;
    top:0px;
    bottom:0px;
    @include transitions;

  #projects{
    line-height:1;
    margin-top:-0.5em;
    padding-top:50%;
    color:#fff;
   }
 }

Circles 2 and 3 that are being extended from 1

.circle2{
  @extend .circle1;
  background-color:blue;
  #about{
    @extend #projects;    
  }
}
.circle3{
  @extend .circle1;
  background-color:gold;
  #contact{
    @extend #projects;
  }
}

Media Query set to 900px 

@media (max-width: 900px) {
  .circle3 {
    right: 100px;
    top: 200px;
  }

  .circle2 {
    left: 350px;
  }

  .circle1, .circle2, .circle3 {
    left: 100px;
  }
}

Upvotes: 0

Views: 62

Answers (1)

Orlando Paredes Hamsho
Orlando Paredes Hamsho

Reputation: 116

It seems your @extended calls are being respected all the way into your breakpoints, meaning that all of the styles being applied to circle1 are being applied to circle 2 and circle 3.

That coupled with circle1 styles being the last to be defined at the breakpoint causes it to override the positioning of the other two. You can fix this by simply placing your .circle1 styles above your other two inside your breakpoint.

@media (max-width:900px){
  .circle1{
    left:100px;
  }
  .circle3{
    right:100px;
    top:200px;
  }

  .circle2{
    left:350px;
  }
}

Upvotes: 1

Related Questions