CODEWITHSUNDEEP
htmlcssresponsive-designoverflow
knocked loose
knocked loose

Reputation: 3314

How can I stop my div from scrolling?

I have a responsive div that has 6 options (5 blocks of text and 1 button). When this div gets to the mobile phone screen size, the div gains a slight 15px scroll to it. I am using a lot of absolute and relative positioning and believe that may be my issue, but I still can't figure it out.

I've tried using a bunch of combinations of overflow and overflow-y, but can't get it.

HTML:

<div class="about-preface">
    <div class="preface-container">
        <div class="preface-block">
            <h4><i class="fa fa-user-plus"></i> Donor Acquisition</h4>
            <p>Startup nonprofits and established organizations need to consistently add new donors in order to surpass fundraising goals.</p>
            <p><a href="/about-fundraising-400#a">More on Donor Acquisition</a></p>
        </div>
        <!-- 5 more of these divs -->
    </div>
</div>

Here is a JS Fiddle with everything in it as well.

Upvotes: 1

Views: 74

Answers (1)

isherwood
isherwood

Reputation: 61114

You may want to put overflow: hidden on the body to force it to contain the padding you have on .about-preface.

Demo

Upvotes: 1

Related Questions