Wordpress-seo: Make the Help Center responsive

[afercia]

See the big plan on _Make everything responsive_ #6319

Issues to address so far:

• the layout needs to switch to a single column at some breakpoint
• the videos need to be responsive
• the Knowledge base articles iframe content need to be responsive, sometimes it is not; see for example this KB page with a 3 columns table: https://kb.yoast.com/kb/license-activation-notices/amp/?source=wpseo-kb-search I'd need some feedback here, /cc @diedexx

[afercia]

Making the Help Center responsive is a bit tricky, one of the reasons is the Help Center is used both in the settings pages and inside the meta box so the general page layout is different. The available width is different so there would be the need to use different breakpoints, making things a bit too complicated.

One small thing that could help would be reducing as much as possible the differences between the Help Center in the meta box and the one in the settings pages. TL;DR I'd need to remove the left and right 12 pixels padding in the meta box. It's a small change and also a design choice so asking feedback. /cc @moorscode @hedgefield

The Help Center in the meta box with the current 12 pixels padding:

Proposed change without padding:

No changes in the settings pages:

[moorscode]

I think it looks a lot nicer with the buttons touching the border.
Wouldn't really mind to put the Help Center in the Settings page inside a container as well, to get the unified look.

This would also fit better in our material design approach.

[hedgefield]

Agreed, it looks good, and I second the idea of a margin/container for the settings page help center.

[afercia]

I think it looks a lot nicer with the buttons touching the border.

Yup, I agree.
About Help Center in the Settings pages, basically remove the full-width background dirty hack :trollface: right? See below:

P.S. I'd also align the Help Center icon (?) with the ones below.

[afercia]

One more thing to consider is that on Premium, there's just one "textarea" box. I'd try to add a wrapper element around the two boxes to be able to switch them to flexbox, which should allow for more flexibility.

[andizer]

I've tested this on mobile together with @jcomack. On his mobile, the search button is placed on a newline. Also the distance between the input and button is pretty small.

On my mobile (maybe the resolution is different) both fields are displayed on a single line:

Maybe it's nice to give the input a width of 100% to make sure the button is one a newline.

[afercia]

Last commit tries to improve a bit the KB search field responsiveness using flexbox.