Menu icon Foundation
Foundation Line Break Issue

I have a Foundation framework grid and I have set 2 columns in one row. I am experiencing an unwanted line break from the first column into the next. The problem exists on a "large" screen size. The first column is a "large-2" and the second is a "large-4 large-centered" and for some reason, the image in the second column seems to be below a line break from the first column h2 element, rather than in line, as it should be. Surely the contents of each column should be aligned with the top of the row unless otherwise stated?

 

Here's the codepen

htmlcssFoundationline-breakissue

I have a Foundation framework grid and I have set 2 columns in one row. I am experiencing an unwanted line break from the first column into the next. The problem exists on a "large" screen size. The first column is a "large-2" and the second is a "large-4 large-centered" and for some reason, the image in the second column seems to be below a line break from the first column h2 element, rather than in line, as it should be. Surely the contents of each column should be aligned with the top of the row unless otherwise stated?

 

Here's the codepen

Rafi Benkual almost 3 years ago

 The centered class for columns is meant to center a single column in a row. What is the design you are looking to create so we can help you more? Can share an image?

Sean Baines almost 3 years ago

Here's the codepen snippet: http://codepen.io/mrseanbaines/pen/Nbymde - I added background colours to see better where the edges of the elements/columns are.