search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

Purpose: Subscription Form Block submit button is misaligned with the email input field #20804

Open liviopv opened 3 years ago

liviopv commented 3 years ago

Steps to Reproduce

  1. Apply the Purpose theme to the site
  2. Add a Subscription Block

What I expected to happen

The Submit Button should be correctly aligned with the input field, either displaying on the same line, or below it.

What actually happened

The Submit button displays with a weird alignment.

Markup on 2021-08-20 at 10:20:16

Context

Customer report #4234458-zen

Operating System

macOS

OS Version

11.15.1

Browser

Chrome/Chromium

Browser Version(s)

92

Is this specific to applied theme? If so, what is the theme name?

Purpose

Simple/Atomic

Simple, Atomic

Console and/or error logs

No response

Number of Users Impacted

All users

Available Workarounds

Provided this CSS, but there might be a better way:

@media screen and (min-width: 768px) {
#subscribe-submit button {
margin-top: auto;
}}

Reproducibility

Consistent

Other information

No response

liviopv commented 3 years ago

Possibly related: https://github.com/Automattic/wp-calypso/issues/52309 https://github.com/Automattic/jetpack/issues/19563

inaikem commented 3 years ago

Although this might be theme-related, I'm first transferring this to the Jetpack repo, where the Subscription Form Block is developed 🙏

jeherve commented 3 years ago

Although this might be theme-related

That would have been my first thought as well.

@scruffian What would be your take on this?

scruffian commented 3 years ago

I think this should be fixed in the block.