Non Responsive Circles

Circle layout home page

by Brent White

HTML

<div class="gridRow">
     <div class="gridItem1">
         <a href="#" id="projects">Projects</a>  
      </div>
 </div>

SCSS

.gridRow{
    display: flex;
    justify-content:center;
    align-items:center;
}

.gridItem1{
    position: relative;
    display: flex;
    align-items:center;
    border-radius:50%;
    min-width:200px;
    width:200px;
    max-width:200px;
    min-height:200px;
    height:200px;
    max-height:200px;
    background-color:magenta;
  
  #projects{
  left:70px;
  position: relative;
  }
}

.gridItem2{
  top:0;
  @extend .gridItem1;
  @include about-contact-ani;
  background-color:yellow;
  
  #about{
  @extend #projects;
  }
}

.gridItem3{
  @extend .gridItem1;
  background-color:cyan;
  
  #contact{
    @extend #projects;
  }
}