Foundation edit for mobile only

[bondimedical]

I have the following code on my Contact Us page to provide details to customers.

<div style="width: 50%; float: left;">
	<div>
		<strong>Company Name:</strong><br />
		Bondimedical Pty Ltd</div>
	<br />
	<div>
		<strong>Address:</strong><br />
		5/68 Gould St<br />
		Bondi Beach<br />
		New South Wales 2026<br />
		Australia</div>
</div>
<div style="width: 50%; float: right;">
	<div>
		<strong>Phone:</strong><br />
		+61424935931 International<br />
		or 1300 935 470 within Australia</div>
	<br />
	<div>
		<strong>Fax:</strong><br />
		1300 859 741 within Australia</div>
	<br />
	<div>
		<strong>Email:</strong><br />
		sales at andropenis.info<br />
		(Replace the word at with @)</div>
</div>

What I have noticed is that for medium or larger devices it appears fine.

However for small devices it appears cramped with information overlapping and needs to be made as one column only. How can I do this?

[bsmither]

I think the best approach is to make only one of the divs float -- choose the left one.

When the viewport gets narrow enough, there won't be enough room for the other div to fit, and should fall down below the floater.

Or, try making the left not float, and if there's no room for the right floater, it should fall down under the left block.

[bondimedical]

I am starting to get text jumping all over the place doing that. Is it possible to have a separate code for small only?

[bsmither]

For Foundation, you will need to learn about:
<div class="small-12 large-8 columns show-for-large-up">
and about how many columns a small viewport gets (all 12 in that example) versus a large viewport (only 8 of the 12).

I haven't mastered it, myself.

[bondimedical]

Ok. Well I would like to try the first method then. I am not as good at css as you are so could you rewrite the code so that only the left div floats?

[bsmither]

 

Was:
<div style="width: 50%; float: right;">

Now:
<div>

[bondimedical]

Thats what I did before and only lines which don't fit drop down and not the whole div. I have included before and after screenshots. How do I make the whole div drop?

[bsmither]

If you make them both float left and no width specified, that will get you mostly what you want.

And you might want to add a bit of margin-right and margin-bottom to the first <div>.

[bondimedical]

If I do that then it turns into one column for the desktop version to?

[bsmither]

I would think the desktop dimensions would be wide enough for those <div> blocks to fit side-by-side.

[bondimedical]

Thanks for your help Brian but I found the answer here http://foundation.zurb.com/docs/components/grid.html

If you use the following code the second div only drops for mobiles.

<div class="row">
  <div class="medium-2 columns">2 columns</div>
  <div class="medium-10 columns">10 columns</div>
</div>
<div class="row">
  <div class="medium-3 columns">3 columns</div>
  <div class="medium-9 columns">9 columns</div>
</div>