bondimedical Posted April 17, 2015 Share Posted April 17, 2015 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? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 17, 2015 Share Posted April 17, 2015 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. Quote Link to comment Share on other sites More sharing options...
bondimedical Posted April 17, 2015 Author Share Posted April 17, 2015 I am starting to get text jumping all over the place doing that. Is it possible to have a separate code for small only? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 17, 2015 Share Posted April 17, 2015 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. Quote Link to comment Share on other sites More sharing options...
bondimedical Posted April 18, 2015 Author Share Posted April 18, 2015 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? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 18, 2015 Share Posted April 18, 2015 Was: <div style="width: 50%; float: right;"> Now: <div> Quote Link to comment Share on other sites More sharing options...
bondimedical Posted April 20, 2015 Author Share Posted April 20, 2015 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? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 20, 2015 Share Posted April 20, 2015 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>. Quote Link to comment Share on other sites More sharing options...
bondimedical Posted April 20, 2015 Author Share Posted April 20, 2015 If I do that then it turns into one column for the desktop version to? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 20, 2015 Share Posted April 20, 2015 I would think the desktop dimensions would be wide enough for those <div> blocks to fit side-by-side. Quote Link to comment Share on other sites More sharing options...
bondimedical Posted April 20, 2015 Author Share Posted April 20, 2015 Thanks for your help Brian but I found the answer here http://foundation.zurb.com/docs/components/grid.htmlIf 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.