Kevin Powell - Community•2y ago

Display flex vertical alignment and responsiveness or position absolute?

I'm trying out various ways to do this and so far only position absolute made sense to me to get accurate spacing. With display flex there was a lot of spacing issues which were solved with margins but way too much tweaking was involved. Any advice on which other approach you suggest and please explain why over display flex or etc. Thank you. https://codepen.io/3dharp/pen/KKGKZNo

6 Replies

interactive-harpOP•2y ago

https://codepen.io/3dharp/pen/KKGKZNo

Harpreet Singh

CodePen

loading page set up

...

interactive-harpOP•2y ago

updated code:

.loading {
  background-color: $color-dark;
  width: 100;
  height: 100vh;
  overflow-y: hidden;

  &__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__heading {
    position: absolute;
    top: 60px;
  }

  &__image {
    height: calc(100vh);
    display: flex;
    align-items: center;
    justify-content: center;

    img{
      height: 570px;
      width: 550px;
      border-radius: 4px;

    }
    // object-fit: cover;
  }

  &__counter {
    position: absolute;
    bottom: 60px;
  }
}

Rowe2ry•2y ago

I'd consider using grid here. on the parent:

.wrapper {
  display: grid;
  padding-top: 20px;
/* whatever you want for top most negative space, possibly something cool like => min(20px, 8vh) for dynamic */
  padding-bottom: 40px; /* whatever you want for bottom-most negative space */
  grid-row-columns: (60px, 20px, 1fr, 40px, 100px);
  /* top content, gap, image takes up avail space, gap, bottom content */
}

.wrapper {
  display: grid;
  padding-top: 20px;
/* whatever you want for top most negative space, possibly something cool like => min(20px, 8vh) for dynamic */
  padding-bottom: 40px; /* whatever you want for bottom-most negative space */
  grid-row-columns: (60px, 20px, 1fr, 40px, 100px);
  /* top content, gap, image takes up avail space, gap, bottom content */
}

oh and you'd put in some empty divs for grid to see those children elements to fill in those gap spaces sorry man, I'm on lunch break so I answer a few of these for fun, but don't have the free time to do it extensively. But you're welcome to add me on Linked in and shoot me some questions form time to time. https://rowe2ry.com

interactive-harpOP•2y ago

sure sounds good css grid is interesting approach but adding many divs, isnt that way too much extra code when not needed> ?*

vince•2y ago

You've been told this isn't allowed. You've also made multiple threads for the same topic

interactive-harpOP•2y ago

deleted

Gaming

Programming

Display flex vertical alignment and responsiveness or position absolute?