Kevin Powell - Community•9mo ago

Responsiveness query

Hey, How would you structure this box at the bottom of the hero? currently made it absolute and translate: 50%. this is not working out for other hero sections as content is increasing and decreasing. it's overflowing to the bottom. How should i solve this? https://i10s.webflow.io/digital-technology-platform

4 Replies

MarkBoots•9mo ago

your .section-hero already has a position relative, so you could give the

.hero-heading-content{
  position: absolute;
  bottom: 0;
  translate: 0 50%;
}

.hero-heading-content{
  position: absolute;
  bottom: 0;
  translate: 0 50%;
}

there are other ways, but this doesnt need a lot changes

Abdul Ahad⚡OP•9mo ago

Tried this, when the padding of the second section is less, the box is overflowing into the next section as it's absolute. This is hero section for all the pages(like 40+), to fix it I'm adjusting padding bottom for . section-hero individually. Any other approach when I can do it once and it'll be good to use in all the places?

MarkBoots•9mo ago

yea, use grid

.section-hero{
  display: grid;
  grid-template-rows: 
      [slider-start] auto [content-start] 1fr [slider-end] 1fr [content-end];
}
.hero-slider{
  grid-area: slider
}
.hero-heading-content{
  grid-area: content;
}

.section-hero{
  display: grid;
  grid-template-rows: 
      [slider-start] auto [content-start] 1fr [slider-end] 1fr [content-end];
}
.hero-slider{
  grid-area: slider
}
.hero-heading-content{
  grid-area: content;
}

bit hard to test with the live site, but it should work. Here a quick demo: https://codepen.io/MarkBoots/pen/gOyWJRw

Abdul Ahad⚡OP•9mo ago

Damnn, got it. Thank you so much, you are the best.

Gaming

Programming

Responsiveness query