Vanilla JS, CSS flex, ::before, ::after

Community feedback

• 

  John_diddles•470

  @JohndiddlesPosted over 3 years ago

  nice one on this challenge.

  There's actually a little issue with the bg-pattern-dots positioning. Unfortunately, I haven't tried out this challenge myself so I don't have any link to provide right now. But then, you did a really great job. I like it.

  0

  ---

  

  FocusCookie•350

  @FocusCookiePosted over 3 years ago

  @Johndiddles thanks! Can't you please specify where the issue is? Is it a vertical position issue? I placed it accordingly to the design and the height there was 900 and 1024.

  0

  

  John_diddles•470

  @JohndiddlesPosted over 3 years ago

  @FocusCookie Hi,

  Sorry it took this long, been busy with work. So I recreated your page and checked out the issue I noticed. When the screen is viewed on a longer screen, the "bg-pattern-dots" moves down the screen. To fix it regardless of the screen size, I made some adjustments to the css.

  @media only screen and (min-width: 675px) {
  body::after {
      display: flex;
      align-self: flex-end;
      justify-content: flex-end;
      background-image: url(../assets/desktop/bg-pattern-dots.svg);
      background-size: cover;
      content: " ";
      height: 104px;
      bottom: 0;
      width: 232px;
      margin-top: -52px;
      margin-right: -94px;
      z-index: 1;
    }
  }
  
  @media only screen and (min-width: 1053px) {
  body::after {
      background-image: url(../assets/desktop/bg-pattern-dots.svg);
      display: flex;
      align-self: flex-end;
      right: 0;
      bottom: 78px;
      width: 232px;
      z-index: -50;
      margin-right: -165px;
    }
  }
  

  0