Menu icon Foundation
Changing button length (with grid)

I am using Foundation 5 with Sass mix-ins. I am trying to make a dynamic button that can be in the grid system, but change length depending on the amount of text in the button. For example: on one page the button says "Games" (which fits great in a grid-column(2)), but on the other page the button says "Email Game Templates" (which does not fit and therefore creates a ugly second line). Is there any way to use the grid and still make the button responsive to the amount of text imputed in the button.

Here is my scss

div a { 
  @include grid-column(2);
  color: #fff;
  height: 27px;
  font-family: 'Quicksand', Palatino, sans-serif;
  text-align: center;
  border-radius: 7px;
  background-color: #34AADC;
  margin-bottom: 5px;
  margin-top: 6px;
  padding-top: 5px;
}
            

         

Here is my html

<p><div><a href="#">Email Game Templates</a></div> </p>
            

         

buttongrid

I am using Foundation 5 with Sass mix-ins. I am trying to make a dynamic button that can be in the grid system, but change length depending on the amount of text in the button. For example: on one page the button says "Games" (which fits great in a grid-column(2)), but on the other page the button says "Email Game Templates" (which does not fit and therefore creates a ugly second line). Is there any way to use the grid and still make the button responsive to the amount of text imputed in the button.

Here is my scss

div a { 
  @include grid-column(2);
  color: #fff;
  height: 27px;
  font-family: 'Quicksand', Palatino, sans-serif;
  text-align: center;
  border-radius: 7px;
  background-color: #34AADC;
  margin-bottom: 5px;
  margin-top: 6px;
  padding-top: 5px;
}
            

         

Here is my html

<p><div><a href="#">Email Game Templates</a></div> </p>
            

         

This post has been closed. No new replies can be added.

Elysse Bonner over 5 years ago

Hi there! Foundation has some set styles so it might be easier if you just use
That will give you a round button. If you make sure your column is a minimum large-3 columns then your button should fit. Here's the code: http://cdpn.io/FKBoz

Rafi Benkual over 5 years ago

Joshua
@jkdreamingyou submitted via twitter: you could absolutely position the button within the grid. This would remove any and all of the issues in a fullscreen.