make elements responsive with CSS transform property

Question

I have a site where there are diamonds fixed at the top of the page. Each diamond is a div box rotated and positioned using the CSS transform property.

The diamonds are not responsive with the site is scaled to a smaller size, and I'm having troubles getting it to be responsive while still staying in the correct positions.

I've tried using media queries to set the width/height of the diamonds and the diamonds container(s), but that disrupts the position of each diamond.

You can view the site here: http://amberrein.wpengine.com/

here is my HTML:

         <div id="diamonds">
            <div class="diamond diamond-1">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-2">
              <div class="fill blank"></div>
            </div>
            <hr>
            <div class="diamond diamond-3">
              <div class="fill logo">
                <a href="#"><img src="https://amberrein.wpengine.com/wp-content/uploads/2017/03/Logo.png"></a>
              </div>
            </div>
            <div class="diamond diamond-4">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-5">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-6">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-7">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-8">
              <div class="fill book-now">Book Now</div>
            </div>
            <div class="social-diamonds">
              <div class="facebook">
                <a href="#"><i class="fa fa-facebook fa-fw fa-lg"></i></a>
              </div>
              <div class="twitter">
                <a href="#"><i class="fa fa-twitter fa-fw fa-lg"></i></a>
              </div>
              <div class="instagram">
                <a href="#"><i class="fa fa-instagram fa-fw fa-lg"></i></a>
              </div>
              <div class="google">
                <a href="#"><i class="fa fa-google-plus fa-fw fa-lg"></i></a>
              </div>
            </div>
          </div>

Here is my CSS:

#diamonds {
  background: transparent;
  width: 100%;
  max-width: 340px;
  height: 455px;
  position: fixed;
  left: 0;
  top: 0;
  animation: 1.5s fadeInTop ease-in-out;
}

.admin-bar #diamonds {
  top: 32px;
}
.diamond {
  width: 150px;
  height: 150px;

}
.diamond.diamond-7 {
  width: 160px;
  height: 160px;
}
.diamond.diamond-8 {
  width: 75px;
  height: 75px;
}
.fill {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  display: block;
}
.logo img {
  max-width: 150px;
  width: 100%;
  transform: rotate(-45deg) translate(-26px,10px);

}
.diamond-1 {
  background: #eee;
  transform: scale(1,1) rotate(45deg) translate(-106px, 0);
}
.diamond-2 {
  background: #888;
  transform: scale(1,1) rotate(45deg) translate(-52px, -266px);
}
.diamond-3 {
  background: #ddd;
  transform: scale(1,1) rotate(45deg) translate(-28px, -82px);
}
.diamond-4 {
  background: rgba(85,85,85,0.9);
  transform: scale(1,1) rotate(45deg) translate(-134px, -28px);
}
.diamond-5 {
  background: rgba(187,187,187,.7);
  transform: scale(1,1) rotate(45deg) translate(-80px, -294px);
}
.diamond-6 {
  background: rgba(238,238,238,.5);
  transform: scale(1,1) rotate(45deg) translate(-186px, -240px);
}
.diamond-7 {
  background: transparent;
  border: 1px solid #444;
  transform: scale(1,1) rotate(45deg) translate(-220px, -427px);
}
.diamond-8 {
  background: rgba(0,0,0,.05);
  transform: scale(1,1) rotate(45deg) translate(-393px, -743px);
}
.fill.book-now {
  transform: scale(1,1) rotate(-45deg) translate(0px,18px);
  font-family: 'Cardo';
  font-size: 18px;
  color: #000;
  text-align: center;
}
#diamonds hr {
  margin-top: -193px;
  visibility: hidden;
}

.social-diamonds {
  color: #fff;
  z-index: 99999;
  position: fixed;
  top:-32px;
  left:0;
}

.admin-bar .social-diamonds {
  top: 0;
}

.social-diamonds a {
  color: #fff;
}

.facebook {
  color: #fff;
  background: #ddd;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  transform: scale(1,1) rotate(45deg) translate(347px,-15px);
  transition: all 300ms ease-in-out;
}
i.fa-facebook {
  transform: scale(1,1) rotate(-45deg);
  transition: 300ms linear;
}

.twitter {
  color: #fff;
  background: #ddd;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  transform: scale(1,1) rotate(45deg) translate(347px,60px);
  transition: all 300ms ease-in-out;
}
i.fa-twitter {
  transform: scale(1,1) rotate(-45deg);
  transition: 300ms linear;
}

.instagram {
  color: #fff;
  background: #ddd;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  transform: scale(1,1) rotate(45deg) translate(347px,144px);
  transition: all 300ms ease-in-out;
}
i.fa-instagram {
  transform: scale(1,1) rotate(-45deg);
  transition: 300ms linear;
}

.google {
  color: #fff;
  background: #ddd;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  transform: scale(1,1) rotate(45deg) translate(347px,218px);
  transition: all 300ms ease-in-out;
}
i.fa-google-plus {
  transform: scale(1,1) rotate(-45deg);
  transition: 300ms linear;
}



.facebook:hover, .twitter:hover, .instagram:hover, .google:hover {
  background: #aaa;
      transition: all 300ms ease-in-out;
    }

Answer 1

The first thing I'd suggest is to change all your pixel-based sizes to a relative length unit set, such as vw.

vw stands for 1% of the viewport's width, and 100 vw takes up the full width of your current window(the viewport).

Try changing the width and height of the .diamond class to a vw unit, and see if that works for you.

Since it is a relative unit set, it will resize to fit the newer resized viewport instead of being fixed there.

Answer 2

This use CSS grid and fraction unit (fr). Test on full screen.

.kontener {
  display: grid;
  grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}
.a {color: white; font-size:1.75rem; font-weight:600;  background-color: red;text-align: center;line-height: 100px;}
.b {color: white; font-size:1.75rem; font-weight:600; background-color: green;text-align: center;line-height: 100px;}
.c {color: white; font-size:1.75rem; font-weight:600; background-color: blue;text-align: center;line-height: 100px;}
.d {color: white; font-size:1.75rem; font-weight:600; background-color: yellow;text-align: center;line-height: 100px;}
.e {color: white; font-size:1.75rem; font-weight:600; background-color: purple;text-align: center;line-height: 100px;}
.f {color: white; font-size:1.75rem; font-weight:600; background-color: grey;text-align: center;line-height: 100px;}

<div class="kontener">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
  <div class="e">5</div>
  <div class="f">6</div>
</div>

Answer 3

Change the transform value using media query for different different device.

/* Large desktop */
@media (min-width: 1200px) { 
 /* your code */
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
/* your code */
 }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
/* your code */
 }

/* Landscape phones and down */
@media (max-width: 480px) { 
/* your code */
 }

Answer 4

Try setting your width/height for the diamond classes relative to the screen size with viewport units. So for instance:

diamond {
   width: 14vw;
   height: 14vw;
}

where vw = 1/100th viewport width

I played with this a bit and the fixed diamond nav scaled fairly nicely.