Menu icon Foundation
How to get two rows to right of a single image...

I'm new to Foundation for Email - working with 2.1 to try and replicate designs using inky that we've done using long-hand methods before.

Mostly it is going well - I can see it will be a real time saver when I get the hang of it.  However, some bits are proving elusive...

I would like to create a structure that has a single image (3 columns) on LHS, and then two rows stacked to its right (9 columns).

I have tried doing this using by nesting rows within rows, and by trying to use a call-out, but neither work - the RH columns are created with 100% width (and so 3 columns worth of each poke out of viewport on RHS).

I don't know if this sort of thing is even possible in Foundation - but would value any pointers anyone can give me on how to do this.

inkylayout

I'm new to Foundation for Email - working with 2.1 to try and replicate designs using inky that we've done using long-hand methods before.

Mostly it is going well - I can see it will be a real time saver when I get the hang of it.  However, some bits are proving elusive...

I would like to create a structure that has a single image (3 columns) on LHS, and then two rows stacked to its right (9 columns).

I have tried doing this using by nesting rows within rows, and by trying to use a call-out, but neither work - the RH columns are created with 100% width (and so 3 columns worth of each poke out of viewport on RHS).

I don't know if this sort of thing is even possible in Foundation - but would value any pointers anyone can give me on how to do this.

Corey Schaaf over 3 years ago

 Here is the INKY markup for what you're trying to do. Let me know if this works for you! 

<container>
	<row>
		<columns small="3" large="3">
			<center>
				<a href=""><img src="http://placehold.it/120x120?text=Image"></a>
			</center>
		</columns>
		<columns small="9" large="9">
			<row>
				<columns small="12" large="12">
					1st row to right of image
				</columns>
			</row>
			<row>
				<columns small="12" large="12">
					2nd row to right of image
				</columns>
			</row>
		</columns>
	</row>
</container>

Gavin Lawrie over 3 years ago

Thanks Corey - worked like a charm.  

Not sure what you did different to me - that's what I tried to do initially - but I guess I messed it up somewhat... :)

Your help is very much appreciated - Thanks!