Menu icon Foundation
Spacing issues

Using modified price tables to build this. Not sure why the spacing between the 'Van' box and the 'SUV' box is being so weird. It doesn't seem to be the SUV box, as I have copied and pasted 'good' boxes into it's position. I also have a top row (you can see the edges at the top of the picture) that is working perfectly fine. However, when I just double it for the bottom row, it does the same thing. (weird spacing, that is.)

Now, I'm really new to this kind of stuff and it is probably something stupidly simple, but I would appreciate if someone could help me out. What could be causing this issue? I added an extra row to push my elements to get a better idea of how large the gap actually was, and it seems to take up as much space as one of the boxes.

I'd really appreciate some assistance, thanks!

(I'm attaching the code for the entire section of boxes, just in case it helps or I'm missing something.)

Ex1

<div class="row">


    		<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">2 Door Unibody</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/2DooUni.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/2-DOOR_UNIBODY CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">4 Door Unibody</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/4DooUni.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/4-DOOR_UNIBODY CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">4 Door Full Frame</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/4FullFra.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/4-DOOR_FULL_FRAME CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">Extended Cab</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/ExtCab.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/EXTENDED_CAB_TRUCK CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
				
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">Quad Cab</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/QuadCa.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/QUAD_CAB_TRUCK.pdf" target="_blank">Open</a></li>
		</ul>
			</div>

			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">Minivan</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/Minivan.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/MINIVAN CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">Van</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/Van.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/VAN CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">SUV</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/SUV.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/SUV CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>

            

         

spacingprice boxgapbeginner

Using modified price tables to build this. Not sure why the spacing between the 'Van' box and the 'SUV' box is being so weird. It doesn't seem to be the SUV box, as I have copied and pasted 'good' boxes into it's position. I also have a top row (you can see the edges at the top of the picture) that is working perfectly fine. However, when I just double it for the bottom row, it does the same thing. (weird spacing, that is.)

Now, I'm really new to this kind of stuff and it is probably something stupidly simple, but I would appreciate if someone could help me out. What could be causing this issue? I added an extra row to push my elements to get a better idea of how large the gap actually was, and it seems to take up as much space as one of the boxes.

I'd really appreciate some assistance, thanks!

(I'm attaching the code for the entire section of boxes, just in case it helps or I'm missing something.)

Ex1

<div class="row">


    		<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">2 Door Unibody</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/2DooUni.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/2-DOOR_UNIBODY CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">4 Door Unibody</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/4DooUni.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/4-DOOR_UNIBODY CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">4 Door Full Frame</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/4FullFra.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/4-DOOR_FULL_FRAME CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">Extended Cab</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/ExtCab.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/EXTENDED_CAB_TRUCK CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
				
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">Quad Cab</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/QuadCa.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/QUAD_CAB_TRUCK.pdf" target="_blank">Open</a></li>
		</ul>
			</div>

			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">Minivan</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/Minivan.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/MINIVAN CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">Van</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/Van.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/VAN CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>
			
			<div class="large-3 small-6 columns">
		<ul class="pricing-table">
		  <li class="title">SUV</li>
		  <li class="bullet-item"><img src="Cut Sheet Images/SUV.PNG" /></li>
		  <li class="cta-button"><a class="custom button" href="Cut Sheets/SUV CUT SHEET.pdf" target="_blank">Open</a></li>
		</ul>
			</div>

            

         
Rafi Benkual about 5 years ago

Just looking at the html you posted, I can't see the issue. http://codepen.io/rafibomb/pen/zCygF

Maybe the issue is in the CSS?

K. Kyger about 5 years ago

Thank you for the response!
I didn't give the CSS much thought concerning this problem. I originally did it and it worked fine, but maybe I changed something in the CSS between the time of me originally doing it and when I realized I saved over the wrong file.

I'll give it a look. Thanks!