Menu icon Foundation
Centering a Button on Mobile Only

I seem to be at a loss.  This should be the simplet thing in the world to do, but I can't seem to get it to work. 

I'm trying to center a button on mobile only. 

 

Large (desktop version looks good)

 

Works great On Desktop

 

On small devices I have the image centered. The title of the product centered, but the button will not center.

 

 

 

 

My code can be found below: 

 

<!-- product callout -->
  <row>
    <columns small="12" large="3" class="large-offset-2">
      <a href="#"><img class="small-float-center" src="http://placehold.it/120" alt="Image of question mark"></a>
    </columns>
    <columns small="12" large="7">
      <p  class="small-text-center"><a href="" class="small-text-center">Title of Product Goes Here</a></p>
      <button href="#" class="primary">
        check it outs
      </button>
    </columns>
  </row>
  <!-- /product callout -->

I noticed in the foundation docs it says you can use the <center></center> tags to encase the button which does work. However on large devices (desktop) I do not want the button centered. 

buttoncenter on mobile only.

I seem to be at a loss.  This should be the simplet thing in the world to do, but I can't seem to get it to work. 

I'm trying to center a button on mobile only. 

 

Large (desktop version looks good)

 

Works great On Desktop

 

On small devices I have the image centered. The title of the product centered, but the button will not center.

 

 

 

 

My code can be found below: 

 

<!-- product callout -->
  <row>
    <columns small="12" large="3" class="large-offset-2">
      <a href="#"><img class="small-float-center" src="http://placehold.it/120" alt="Image of question mark"></a>
    </columns>
    <columns small="12" large="7">
      <p  class="small-text-center"><a href="" class="small-text-center">Title of Product Goes Here</a></p>
      <button href="#" class="primary">
        check it outs
      </button>
    </columns>
  </row>
  <!-- /product callout -->

I noticed in the foundation docs it says you can use the <center></center> tags to encase the button which does work. However on large devices (desktop) I do not want the button centered. 

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

Corey Schaaf over 3 years ago

I was able to figure this out  but using class="small-float-center" on the button class. 

<!-- product callout -->
  <row>
    <columns small="12" large="3" class="large-offset-2">
      <a href="#"><img class="small-float-center" src="http://placehold.it/120" alt="Image of question mark"></a>
    </columns>
    <columns small="12" large="7">
      <p  class="small-text-center"><a href="" class="small-text-center">Title of Product Goes Here</a></p>
      <button href="#" class="primary small-float-center">
        check it outs
      </button>
    </columns>
  </row>
  <!-- /product callout -->