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>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.