Kevin Powell - Community•2y ago

Center a text element staying responsive

https://codepen.io/ahad4387/pen/MWPrEJb I'm trying to keep the dark EXPLORE always in the centre while staying responsive. tried using absolute with % on left but it isn't really responsive. How should I approach this?

12 Replies

Kevin Powell•2y ago

absolute can do it, but needs a bit more work 😄 basically, you use absolute to pull it out of the flow, then set the width to match the size of the content (with width: min-content) and then you can use auto margin on the left and right. https://codepen.io/kevinpowell/pen/abRELEq?editors=1100

Abdul Ahad⚡OP•2y ago

it's overlapping with the background explores though

Abdul Ahad⚡OP•2y ago

i'm trying to achieve something like this

Kevin Powell•2y ago

updated the codepen. using the left: 50%; transform: translate(-50%) trick to center it.

Abdul Ahad⚡OP•2y ago

sorry, I'm bothering you again. Getting a horizontal scroll due to the left: 50% and transform: translate(-50%)

Caio Marcellus•2y ago

Hey, Abdul: I put display flex, justify-content: center on the wrappe and it worked

.wrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center
}
.heading {
  font-size: 4rem;
  color: #e4e4e4;
  white-space: nowrap;
}
.heading span {
  color: #1e1e1e; 
}

.wrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center
}
.heading {
  font-size: 4rem;
  color: #e4e4e4;
  white-space: nowrap;
}
.heading span {
  color: #1e1e1e; 
}

Abdul Ahad⚡OP•2y ago

https://codepen.io/ahad4387/pen/MWPrEJb I did something wrong?

ahad4387

CodePen

center dark element

...

Chris Bolson•2y ago

adding overflow-x: hidden;to the body might fix that. This works too

Caio Marcellus•2y ago

Just take these out of heading:

/*position: absolute;
  left: 50%;
  transform: translate(-50%);*/

/*position: absolute;
  left: 50%;
  transform: translate(-50%);*/

@abdulahad

Abdul Ahad⚡OP•2y ago

got it, thank you so much. yeah got it now. just trying to understand, on the wrapper, we have the width 100% and overflow: hidden, why is it not following it?

Chris Bolson•2y ago

It looks ok to me. What is it not following? By the way, you don't need these lines either now:

width: max-content;
  margin-left: auto;
  margin-right: auto;

Abdul Ahad⚡OP•2y ago

yeah yeah, now it's fine after adding overflow-x: hidden; but before adding that, why is the overflow: hidden not getting respected is my doubt

Gaming

Programming

Center a text element staying responsive