Overflow-x: hidden position disables position: sticky of my container

user_15275485 0
Viewed 164

I have an element that is supposed to be sticky when scrolling. How can I have this element sticky, and horizontal scroll on mobile hidden? What am I doing wrong and having horizontal scroll on iPhone in the first place?

Thanks.

.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 12%;
}

.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 12%;
}
<div class="container">
  <div class="row">
    <div class="col-md-6 align-self-start sticky-sidebar">
      <h2 class="text-light landing-heading d-inline">What we do</h2>
      <img src="https://via.placeholder.com/100" alt="image" />
      <p>This is sticky!</p>
    </div>

bootstrap-5 css html
1 Answers

One of my elements had the bad padding. Fixed the padding, and horizontal scroll disappeared. I deleted overflow-x because now I don't need at everything worked like a charm.

user_152754850
Related