#2322: margins and layout on mobile screens

[rittermo]

The margins on left and right are not symmetrical and the gradient line breaks in the header and the footer. Also the padding inside the grey area is still rather large and takes up a lot of space on small screens. Can we make it as small as the outer white margin?

We should switch the white space situation here, so that the content blocks are more discernible. There needs to as much white space after the elements when the three-column element switches to a one-column layout as there currently is after the image. And there should be less white space after the image (about as much as there currently is after the end of an column element.

There should be half as much space between the „for…“ byline and the headline.

The padding around the content inside the participation area should be smaller. As small as the white space around the grey area on the landing page.

Images in the content area don’t resize correctly vertically https://product-dev.liqd.net/buro-fur-vielfalt/projects/vision-2030/

The tabs don’t fit into one line anymore on very small screens (320px width). For the 576px breakpoint, we should decrease the font-size to 1rem, the padding to .2em and increase the margin-right to -1px, to still make the feel separated enough to be clickable

On all screens: The „angemeldet bleiben“ should not be indented and the Reset password link should be underneath the button with about a line-height of white-space. Mobile: The text-input should be full width on small screens.

[philli-m]

note: check after pm-2019-10-issue-fixes is merged with updated spacing results

• Header padding corrected
• tab issue solved
• By-line: h margins have been reduced, check to if if enough
• participation padding: seems to be solved, haven't checked on all module types

[philli-m]

@rittermo cannot reproduce issue with top ribbon, what browser did you find it on?

[fuzzylogic2000]

I could reproduce it... On chrome and duckduckgo on android:

[philli-m]

ref: Images in the content area don’t resize correctly vertically https://product-dev.liqd.net/buro-fur-vielfalt/projects/vision-2030/ @rittermo when adding images via ck editor, you can choose the size of your image which then becomes a inline style and as a class name is not applied, it seems it can't be overwritten, hopefully this issue will be resolved with a new editor. Until then you can assign a size via the editor but it still wont be very responsive.