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>

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>

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