Menu icon Foundation
Too much white space between divs

Hello there!

I was wondering why there is a big gap in space between one div and the other. Here is the link: http://www.tel3.com/temp/mobile.jsp

Look at the iPhone graphic to the far left and the text to the far right. I want to get them closer together.

Here is the code too:

   <div class="row">
    	    <div class="large-6 columns"><img src="iphone-mobile.png"></div>
            <div class="large-4 columns"><h3>Call from any Phone</h3><br><p>Enjoy iPhone’s features including dialing from your address book while saving on your international calling with TEL3.</p></div>        
    </div>         

         

divswhitespace

Hello there!

I was wondering why there is a big gap in space between one div and the other. Here is the link: http://www.tel3.com/temp/mobile.jsp

Look at the iPhone graphic to the far left and the text to the far right. I want to get them closer together.

Here is the code too:

   <div class="row">
    	    <div class="large-6 columns"><img src="iphone-mobile.png"></div>
            <div class="large-4 columns"><h3>Call from any Phone</h3><br><p>Enjoy iPhone’s features including dialing from your address book while saving on your international calling with TEL3.</p></div>        
    </div>         

         
Tomi Tomion almost 5 years ago

Add float: right; to the img tag and in the text div change it from 4 to 6 columns

Sophia Taveras almost 5 years ago

if I float the image left, it also pushes left on mobile view and doesn't look good. Is there another solution to this?

Tomi Tomion almost 5 years ago

Try this then )
HTML
<div class="row">
<div class="large-offset-2 large-4 columns"><img src="iphone-mobile.png"></div>
<div class="large-4 columns end"><h3>Call from any Phone</h3><br><p>Enjoy iPhone’s features including dialing from your address book while saving on your international calling with TEL3.</p></div>
</div>