Menu icon Foundation
Buttons don't go full width on mobile

I'm using the command line tools to create a new Foundation for Email project. The docs indicate that buttons expand to be full-width on mobile automatically, however this isn't happening for me so far.

My Inky syntax and the template that is rendered are both included here, along with a screenshot of the template at mobile width...but sans full width button.

What am I doing wrong? Please help!

Screen shot 2016 03 09 at 1.47.37 am

<!-- This is my code in Inky -->
<container>
    
	<row class="logo">
  		<center>
				<columns small="4" large="4">
				</columns>
				<center>
				<columns small="4" large="4">
					<img src="https://s3.amazonaws.com/assets.spearheaddigital.co/fake_logo.png" alt="fake_logo" width="200" />
				</columns>
				</center>
				<columns small="4" large="4">
				</columns>
			</center>
	</row>
  
  <row>
    <columns small="12" large="12">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
  
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>

      <p><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></p>
    </columns>
  </row>

  <row>
    <columns small="12" large="12">
		  <center>
        <button>
				  <a href="#">This is a thing.</a>
			  </button>
		  </center>
	  </columns>
  </row>
  
</container>


            

         

 <!-- This is the template that gets rendered --->

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body>
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>
            <table class="container"><tbody><tr><td>
                
                <table class="row logo"><tbody><tr>
              		<center>
            				    <th class="small-4 large-4 columns first last">
                  <table>
                    <tr>
                      <th>
            				</th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
            				<center>
            				    <th class="small-4 large-4 columns first last">
                  <table>
                    <tr>
                      <th>
            					<img src="https://s3.amazonaws.com/assets.spearheaddigital.co/fake_logo.png" alt="fake_logo" width="200">
            				</th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
            				</center>
            				    <th class="small-4 large-4 columns first last">
                  <table>
                    <tr>
                      <th>
            				</th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
            			</center>
            	</tr></tbody></table>
              
              <table class="row"><tbody><tr>
                    <th class="small-12 large-12 columns first last">
                  <table>
                    <tr>
                      <th>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
              
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
            
                  <p><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></p>
                </th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
              </tr></tbody></table>
            
              <table class="row"><tbody><tr>
                    <th class="small-12 large-12 columns first last">
                  <table>
                    <tr>
                      <th>
            		  <center>
                    <table class="button"><tr><td><table><tr><td>
            				  <a href="#">This is a thing.</a>
            			  </td></tr></table></td></tr></table>
            		  </center>
            	  </th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
              </tr></tbody></table>
              
            </td></tr></tbody></table>
            
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>
           

         

emailmobilefull-widthbuttons

I'm using the command line tools to create a new Foundation for Email project. The docs indicate that buttons expand to be full-width on mobile automatically, however this isn't happening for me so far.

My Inky syntax and the template that is rendered are both included here, along with a screenshot of the template at mobile width...but sans full width button.

What am I doing wrong? Please help!

Screen shot 2016 03 09 at 1.47.37 am

<!-- This is my code in Inky -->
<container>
    
	<row class="logo">
  		<center>
				<columns small="4" large="4">
				</columns>
				<center>
				<columns small="4" large="4">
					<img src="https://s3.amazonaws.com/assets.spearheaddigital.co/fake_logo.png" alt="fake_logo" width="200" />
				</columns>
				</center>
				<columns small="4" large="4">
				</columns>
			</center>
	</row>
  
  <row>
    <columns small="12" large="12">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
  
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>

      <p><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></p>
    </columns>
  </row>

  <row>
    <columns small="12" large="12">
		  <center>
        <button>
				  <a href="#">This is a thing.</a>
			  </button>
		  </center>
	  </columns>
  </row>
  
</container>


            

         

 <!-- This is the template that gets rendered --->

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body>
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>
            <table class="container"><tbody><tr><td>
                
                <table class="row logo"><tbody><tr>
              		<center>
            				    <th class="small-4 large-4 columns first last">
                  <table>
                    <tr>
                      <th>
            				</th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
            				<center>
            				    <th class="small-4 large-4 columns first last">
                  <table>
                    <tr>
                      <th>
            					<img src="https://s3.amazonaws.com/assets.spearheaddigital.co/fake_logo.png" alt="fake_logo" width="200">
            				</th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
            				</center>
            				    <th class="small-4 large-4 columns first last">
                  <table>
                    <tr>
                      <th>
            				</th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
            			</center>
            	</tr></tbody></table>
              
              <table class="row"><tbody><tr>
                    <th class="small-12 large-12 columns first last">
                  <table>
                    <tr>
                      <th>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
              
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
            
                  <p><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></p>
                </th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
              </tr></tbody></table>
            
              <table class="row"><tbody><tr>
                    <th class="small-12 large-12 columns first last">
                  <table>
                    <tr>
                      <th>
            		  <center>
                    <table class="button"><tr><td><table><tr><td>
            				  <a href="#">This is a thing.</a>
            			  </td></tr></table></td></tr></table>
            		  </center>
            	  </th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
              </tr></tbody></table>
              
            </td></tr></tbody></table>
            
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>
           

         
Remco Janssen over 3 years ago

Try this:

<table class="button">
  <tr>
    <td>
      <table>
      <tr>
        <td class="expander">
         <a href="#">This is a thing.</a>
        </td>
      </tr>
      </table>
    </td>
  </tr>
</table>

Vladimir over 3 years ago

@Greg Wasserstrom @Remco Janssen or you can use this

<a class="expanded button" href="#">Such Expand</a>

and here is a code in full
http://codepen.io/zlatiborac/pen/wGKNwe

Vladimir over 3 years ago

Sorry, just saw this is for email FW...

Remco Janssen over 3 years ago

@Vladimir that was my first reaction as well, but I don't know if this goes for 'foundation for email' ... it does for 'sites'

Rafi Benkual over 3 years ago

 If you are installing with the CLI - I think the project needs to be updated to the latest version 2.0 RC3
 
In your package.json folder target the update to
 
"dependencies": {
"foundation-emails": "zurb/foundation-emails#v2.0"
},
 
Then run npm update

Greg Wasserstrom over 3 years ago

Interesting. This is what it currently says:

 },
  "author": "ZURB <[email protected]>",
  "license": "MIT",
  "dependencies": {
    "foundation-emails": "2.0.0-rc.2"
  },

I'm going to see what happens if I delete the -rc.2, but let me know if I should do something different!

Greg Wasserstrom over 3 years ago

Hmm, Rafi, that doesn't seem to have done anything. I also ran the foundation update command and it says "Nothing to update!", so I presume my edit to the package.json file and subsequent npm update worked.

Still not expanding to be full width on mobile!

Greg Wasserstrom over 3 years ago

The responsive grid seems to be broken in rc3--at least when doing `foundation build` as opposed to `foundation watch`. Anyone else seeing that issue?

Rafi Benkual over 3 years ago

Not seeing any issues with it right now - can you share your markup so we can help you more?