CODEWITHSUNDEEP
cssbuttonzurb-foundation
Ian
Ian

Reputation: 900

Foundation 5 buttons

Hi I am trying to learn Foundation 5, I have the following code which works ok on my laptop, but viewing the same page on my mobile phone (Android) it looks a mess, not expanding across the screen and text outside of the button-- any ideas why??

  <div class="row">
    <div class="large-12 columns">
      <ul class="button-group even-4 expand">
         <li><a href="#" class="button secondary">TEST 1</a></li>
        <li><a href="#" class="button secondary">TEST 2</a></li>
        <li><a href="#" class="button secondary">TEST 3</a></li>
        <li><a href="#" class="button secondary">TEST 4</a></li>
      </ul>
    </div>
  </div>

Upvotes: 1

Views: 171

Answers (2)

Jonathan Ortega
Jonathan Ortega

Reputation: 19

Read the Foundation 5 documentation anout the small, medium, large and xlarge classes, but as a quick hint, if you want that a div keeps it exacts proportions and all devices that would adapt your html code for mobile, use small classes, since this will keep proportion all the way to large, unless you declare another

<div class="row">
    <div class="small-12 columns">
      <ul class="button-group even-4 expand">
        <li><a href="#" class="button secondary">TEST 1</a></li>
        <li><a href="#" class="button secondary">TEST 2</a></li>
        <li><a href="#" class="button secondary">TEST 3</a></li>
        <li><a href="#" class="button secondary">TEST 4</a></li>
      </ul>
    </div>
  </div>

Upvotes: 0

badfilms
badfilms

Reputation: 4507

Being that you are using the large-12 layout, your design is not formatted to display properly for smaller screens.

See the following for documentation on the Foundation grid: http://foundation.zurb.com/docs/components/grid.html

Upvotes: 3

Related Questions