2 replies

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;
      }
    }
  }

  &.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

section

section

section which contains a

row

row

row

row and then a

span

span

span

span which contains the

svg

svg

svg

svg.

Just wondered if anyone had a better solution?

Is there a better way of positioning this graphic 🤔

Similar Threads

Similar Threads

Similar Threads