KPC
Kevin Powell - Community•3y ago
Abdul Ahad⚡

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
Kevin Powell•3y 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⚡
Abdul Ahad⚡OP•3y ago
it's overlapping with the background explores though
Abdul Ahad⚡
Abdul Ahad⚡OP•3y ago
i'm trying to achieve something like this
Kevin Powell
Kevin Powell•3y ago
updated the codepen. using the left: 50%; transform: translate(-50%) trick to center it.
Abdul Ahad⚡
Abdul Ahad⚡OP•3y ago
sorry, I'm bothering you again. Getting a horizontal scroll due to the left: 50% and transform: translate(-50%)
Caio Marcellus
Caio Marcellus•3y 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⚡
Abdul Ahad⚡OP•3y ago
Chris Bolson
Chris Bolson•3y ago
adding overflow-x: hidden;to the body might fix that. This works too
Caio Marcellus
Caio Marcellus•3y ago
Just take these out of heading: 
/*position: absolute;
  left: 50%;
  transform: translate(-50%);*/
/*position: absolute;
  left: 50%;
  transform: translate(-50%);*/
@abdulahad
Abdul Ahad⚡
Abdul Ahad⚡OP•3y 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
Chris Bolson•3y 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⚡
Abdul Ahad⚡OP•3y 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

Did you find this page helpful?