Menu icon Foundation
F4A Stopping Scrollbars for banner

So trying to create a banner that will hold not much more than a title and slogan maybe an image slider but thats it

<div class="grid-frame"><!-- Takes 100% of the browser window-->
    <div class="grid-block vertical">
        <div class="grid-block text-center shrink" id="banner">
            <div class="grid-content">
                <h1>Some Banner</h1>
                <hr>
                <h3 class="subheader">Some Slogan</h3>
            </div>
        </div>
        <div class="grid-block" id="content">
            <div class="grid-content">
                <p>Some content here</p>
            </div>
        </div>
        
    </div>
</div>
            

         

Works Ok in Medium Up aslong if there is only one line of content but in mobile or if there is to much content in the banner then it will put a scroll bar on instead of flowing with the content ?

How can I prevent this from happening ?

grid-blockgridapps

So trying to create a banner that will hold not much more than a title and slogan maybe an image slider but thats it

<div class="grid-frame"><!-- Takes 100% of the browser window-->
    <div class="grid-block vertical">
        <div class="grid-block text-center shrink" id="banner">
            <div class="grid-content">
                <h1>Some Banner</h1>
                <hr>
                <h3 class="subheader">Some Slogan</h3>
            </div>
        </div>
        <div class="grid-block" id="content">
            <div class="grid-content">
                <p>Some content here</p>
            </div>
        </div>
        
    </div>
</div>
            

         

Works Ok in Medium Up aslong if there is only one line of content but in mobile or if there is to much content in the banner then it will put a scroll bar on instead of flowing with the content ?

How can I prevent this from happening ?