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)
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.