Search code examples
csssvgsassmedia-queriesscss-mixins

media query in SCSS with mixin

I am trying to change the size of an SVG circle for different screen sizes. I set up a breakpoints file with mixins for different screen sizes like this

$breakpoints: (
"xs": 0,
"sm": 480px,
"md": 720px,
"lg": 960px,
"xl": 1200px,

);

My issue is that when I try to add different sizes the browser accepts only the first one in this case the xl. If I shrink down the browser window to the size of the lg still applies the xl rule. In the inspect it shows like this: enter image description here

Can you tell me what I am doing wrong why this happens and what should I do differently?

.app-skills-container {
     display: flex;
     width: 43vw;
     height: max-content;
     padding: 25px 0;
     row-gap: 3vh;
     column-gap: 3vw;
     flex-wrap: wrap;
     z-index: 1;
}
 .circle-container {
     display: flex;
     position: relative;
     align-items: center;
     flex-direction: column;
     width: 90px;
     height: 140px;
}
 .outer {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     background-color: #fff;
     rotate: -90deg;
}
 .inner {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     top: 10px;
     left: 10px;
     width: 70px;
     height: 70px;
     background-color: #b3b3b3;
     border-radius: 50%;
}
 .circle {
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     top: 0;
     left: 0;
     width: 100px;
}
 .cicle-viewport {
     width: 100px;
     height: 100px;
}
 .circle1 {
     fill: none;
     stroke: #000;
     position: absolute;
     top: 0;
     left: 0;
     stroke-width: 5px;
     stroke-dasharray: 350;
     stroke-dashoffset: 350;
     animation: anim 2s linear forwards;
}
 @keyframes anim {
     100% {
         stroke-dashoffset: 157.5;
    }
}
 @media (max-width: 0) {
     .circle1 {
         stroke: orange;
    }
}
 @media (max-width: 480px) {
     .circle1 {
         stroke: purple;
    }
}
 @media (max-width: 720px) {
     .circle1 {
         stroke: blue;
    }
}
 @media (max-width: 960px) {
     .circle1 {
         stroke: green;
    }
}
 @media (max-width: 1200px) {
     .circle1 {
         stroke: red;
    }
}
 .app-logos {
     display: flex;
     justify-content: center;
     align-items: center;
     rotate: 90deg;
     width: 35px;
}
 .app-name {
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: Roboto Condensed, sans-serif;
     font-weight: 700;
     text-align: center;
     font-size: 1em;
     line-height: 1.2em;
     height: 55px;
}
 p {
     margin: 0;
}
 
<div class="circle-container">
                <div>
                  <div class="outer">
                    <div class="circle" >
                      <svg version="1.1" class="cicle-viewport" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" >
                      <circle class="circle1" cx="45" cy="45" r="40" stroke-linecap="round" /></svg>
                    </div>
                    <div class="inner">
                      <img class="app-logos" src="https://designordering.com/resume/img/Adobe-Illustrator.png" alt="js logo">
                    </div>
                  </div>
                  <div class="app-name">          
                    <p>Adobe<br>Illustrator</p>   
                  </div>
                </div>
              </div>

I don't know how to insert SCSS in the code panel so that is why shows differently. Here you can see the code in a CodePen link https://codepen.io/weisz-istvan/pen/JjaGNpL.

Solution

  • What you probably want is to use min-width instead to avoid the overlap you see on the devtools. Or use a combination of min-width and max-width.