Menu icon Foundation
removing rows in small / mobile

Howdy,

I'm working on a site that needs to look quite different in small. I need to remove two rows of content in mobile sizes.

            

        <div class="row">
    		<div class="small-6 small-centered columns">
    			<img src="../img/duelerHeader.png" />
    		</div>
        </div>
        <div class="row">
    		<div class="small-9 small-centered  columns"> -->
    			<iframe name="Dueler" src="http://google.com/" frameborder="0" scrolling="no" id="iframe" width="1101" height="588" ></iframe>
    		</div>
	    </div>
	    <div class="row">
    		<div class="small-2 small-centered columns">
    			<img src="../img/duelerFoot.png" />
    		</div>
        </div>

I'm looking to remove the rows above and below the iframe row in small only. Any ideas?

Rowsmobile onlyremove rowsgrid

Howdy,

I'm working on a site that needs to look quite different in small. I need to remove two rows of content in mobile sizes.

            

        <div class="row">
    		<div class="small-6 small-centered columns">
    			<img src="../img/duelerHeader.png" />
    		</div>
        </div>
        <div class="row">
    		<div class="small-9 small-centered  columns"> -->
    			<iframe name="Dueler" src="http://google.com/" frameborder="0" scrolling="no" id="iframe" width="1101" height="588" ></iframe>
    		</div>
	    </div>
	    <div class="row">
    		<div class="small-2 small-centered columns">
    			<img src="../img/duelerFoot.png" />
    		</div>
        </div>

I'm looking to remove the rows above and below the iframe row in small only. Any ideas?

This post has been closed. No new replies can be added.

cosmoSwiller about 5 years ago

I'll go ahead and answer my own question:

http://foundation.zurb.com/docs/components/visibility.html