Question

0

101

Views

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

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>

9 months ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-05-19T14:34:08.111Z

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.