Menu icon Foundation
Aligning Button Groups Based on Media Queries

I wasn't sure how to best title this, but you're reading this now and hopefully I can better explain!

I have a button group with three buttons as such:

<div class="row">
   <div class="small-12 column">
      <div class="button-group">
         <a class="button">Home</a>
         <a class="button">Previous</a>
         <a class="button">Next</a>
      </div>
   </div>
</div>

On mobile/tablet, I'd like to have these buttons expanded, which is easy enough with the .expanded class and a media query.

My issue comes to the desktop view, where I'd like to have the Home button left-aligned and the Previous/Next buttons right-aligned. Here's an example:

Button Group Desktop Example

 

I can achieve this very easily with the .float-right and .float-left classes, but it breaks the .expanded view on mobile/tablet.

Button Group Mobile Example

Any ideas? Let me know if I can clarify. Thanks.

 

button groupbutton-groupmedia queries

I wasn't sure how to best title this, but you're reading this now and hopefully I can better explain!

I have a button group with three buttons as such:

<div class="row">
   <div class="small-12 column">
      <div class="button-group">
         <a class="button">Home</a>
         <a class="button">Previous</a>
         <a class="button">Next</a>
      </div>
   </div>
</div>

On mobile/tablet, I'd like to have these buttons expanded, which is easy enough with the .expanded class and a media query.

My issue comes to the desktop view, where I'd like to have the Home button left-aligned and the Previous/Next buttons right-aligned. Here's an example:

Button Group Desktop Example

 

I can achieve this very easily with the .float-right and .float-left classes, but it breaks the .expanded view on mobile/tablet.

Button Group Mobile Example

Any ideas? Let me know if I can clarify. Thanks.

 

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

Joshua Scott almost 3 years ago

In your row and buttons add the expaned class

<div class="row expanded">
   <div class="small-4 columns">
      <a class="button expanded">Home</a>
   </div>
   <div class="small-8 columns">
      <a class="button expanded float-right">Previous</a>
      <a class="button expanded float-right">Next</a>
   </div>
</div>

Joe Windeknecht almost 3 years ago

Hey Joshua, my only issue with this is that I'd like these buttons to expand to the full, equal width of the viewport.

Mobile Expanded Buttons Example

Joshua Scott almost 3 years ago

I would do something like the following. Remember to take advantage of your grid.

<div class="row">
   <div class="small-4 columns">
      <a class="button">Home</a>
   </div>
   <div class="small-8 columns">
      <a class="button float-right">Previous</a>
      <a class="button float-right">Next</a>
   </div>
</div>