Button alignment in aligned form (on small screen sizes)

[prjm]

On small screen sizes, the vertical alignment of different button kinds differs
(using an aligned form and the 'pure-controls' button container)

On larger screens:

On smaller screens:

Demo here: http://jsfiddle.net/prjm/vuz8m663/

Am I missing something?

[jamesalley]

The problem is with the margin on the submit button. To fix this problem immediately, adjust the margin for .pure-form button[type=submit]. I will leave this issue open, I might need to fix that margin in Pure.

[jamesalley]

In other words, this has nothing to do with the form being pure-form-aligned or with using the pure-controls construct, or the screen size per se. Wait, actually it IS tied to a media query:

@media only screen and (max-width :480px) {
    .pure-form button[type=submit] {
        margin: .7em 0 0
    }

I'm investigating why this is the case.

[jamesalley]

So, this rule was written to give submit buttons a little extra margin when the screen size is small and the buttons tend to stack vertically. I think this decision should be revisited and possibly this declaration should be removed. This will take some time to consider and test, so I'll create a task for myself.

For now, you can either change the margin as I mentioned above, or just use an input instead of a button. That is, change <button type="submit" ...> to <input type="submit" ...>

[arnoldsandoval]

@jamesalley thought that might be the case - I was looking around the docs for full-width buttons (trying to familiarize myself with the codebase) can you point me to where that is? I didn't see it in the buttons section.

[jamesalley]

I don't think there are any full-width button constructs, you'll have to add a class for that yourself.

[jamesalley]

e.g.,

.full-width {
    width: 100%;
}

Pretty trivial customization to do yourself. We try not to add too many features to Pure, as it would get big and feature discovery would be tough.

[prjm]

Thank you for the quick support.
I was just wondering why the margin was applied only to submit buttons.
Of course, its a good idea to maximize buttons on small screens.