Kevin Powell - Community•14mo ago

Is there a better way of positioning this graphic 🤔

Hello, I have a graphic which sits in the top right corner of its container. Currently I have absolutely positioned it, and it feels like a poor solution as it clearly isn't going to work on some screens unless I add something for every permutation. Here is my current SCSS…

  &.title-with-offset-introduction {
    .dash-graphic {
      top: -11vh;
      right: -46vw;

      @media screen and (min-width: 390px) {
        top: -9vh;
      }

      @media screen and (min-width: 834px) {
        top: -5.5vh;
        right: -17vw;
      }

      @include breakpoints.breakpoint('macbook') {
        top: -7.5vh;
        right: 2vw;
      }

      @include breakpoints.breakpoint('imac') {
        top: -4.5vh;
        right: 1vw;
      }
    }
  }

  &.title-with-offset-introduction {
    .dash-graphic {
      top: -11vh;
      right: -46vw;

      @media screen and (min-width: 390px) {
        top: -9vh;
      }

      @media screen and (min-width: 834px) {
        top: -5.5vh;
        right: -17vw;
      }

      @include breakpoints.breakpoint('macbook') {
        top: -7.5vh;
        right: 2vw;
      }

      @include breakpoints.breakpoint('imac') {
        top: -4.5vh;
        right: 1vw;
      }
    }
  }

The markup is just a section which contains a row and then a span which contains the svg. Just wondered if anyone had a better solution?

1 Reply

vince•14mo ago

It's how you're positioning it I believe. I like to do something like:

.child-element {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  transform: translate(50%, 50%); /* translates 50% based off *child* dimensions */
  width: min(5rem, 15vw);
  height: min(5rem, 15vw);
  background: ...;
}

.child-element {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  transform: translate(50%, 50%); /* translates 50% based off *child* dimensions */
  width: min(5rem, 15vw);
  height: min(5rem, 15vw);
  background: ...;
}

This way I don't have to set breakpoints at all.

Gaming

Programming

Is there a better way of positioning this graphic 🤔