Mobile Layout and Typography Fixes and Improvements about kleiderordnung-berlin HOT 10 CLOSED

• "all news" link not visible on iphone

from kleiderordnung-berlin.

• contact form:
  • clickable elements slightly too close together,
  • text might be slightly larger here, but not necessarily
  • submit button quite small on iPhone

• sub-pixel artifacts distorting form fields in mobile Chrome on Google Pixel 6

• suboptimal auch auf Desktop Firefox:
  

from kleiderordnung-berlin.

• Footer links to imprint, TOS, and privacy pages too close together in Samsung Internet on Android
  

But it's fine on iPhone

from kleiderordnung-berlin.

• heading line height insufficient (on TOS AGB page in Samsung Internet)
  

same on iPhone:

and also on desktop if the viewport is small enough to force a line break.

from kleiderordnung-berlin.

• small paragraph text might be slightly too small to read comfortably on mobile
  • slightly increase font size?
  • slightly increase line height a little bit more?
  • slightly increase margins between offers list items

screenshot: Firefox on Huawei P30

• similar but even worse due to sub pixel distortions on Google Pixel 7:

• offer sub navigation links might be slightly larger too

screenshot: Chrome on Google Pixel 7

Desktop

• similar adjustments could be applied on desktop as well:
  • slightly larger line / height margin of list items
  • dto. especially between pricing lines

Actual websight (on the right) vs. Figma design (on the left):

from kleiderordnung-berlin.

Desktop testimonial stories text goes below image base line for no reason, looks unintended or broken.

vs. intended design

from kleiderordnung-berlin.

Auch wenn es so oder ähnlich entworfen wurde, erscheint es mir besonders auf kleinen Screens falsch, dass die Überschrift "Meine Mission" kleiner ist als "Gutscheine". Zumindest an dieser Stelle würde ich mir die Freiheit nehmen, weiter von den Designs abzuweichen, weil wir ohnehin noch unglücklich mit dem Bereich Mission / CTA waren.

Abstände reduzieren (s.o.) und Überschrift vergrößern:

from kleiderordnung-berlin.

Schriftarten globaler korrigiert (1rem sollte auch mobil standardmäßig 16px bleiben).
Submit-Button durch Deaktivieren der Webkit-Appearance nun auch auf Apple iPhone wunschgemäß gestaltet.
Problematisch bleibt komische Schriftgröße auf Android u.a. bei den News-Überschriften (die könnten generell größer sein) und im Kontaktformular.

from kleiderordnung-berlin.

Artefakte der Checkboxen könnten falscher Alarm, also ein scheinbares Problem sein, dass durch Zoom im BrowserStack-Interface entsteht. Scheint wahrscheinlich: zoom in und scroll hoch und runter verringert das Problem gegen Null.

from kleiderordnung-berlin.

Desktop testimonial stories text goes below image base line for no reason, looks unintended or broken.

Hanging quote text only appears in production, not on localhost, so it's probably content related. Did the editor insert unintended additional paragraphs and we could we adapt our styles more generically - but that does not seem to be the reason. The new testimonial text by Cem is longer than the others, increasing common height.
Layout should not be affected by that. Can we make every other text align with the image baseline?
But if we introduce max-height and overflow, how to ensure that there is enough space below the testimonials?

Could we switch to more width instead of more height if a text gets too long?

Pragmatic improvements:

• setting max-height (35.625rem like image height) restores the intended layout,
• but overflow-y: visible has no visible effect, as the content overflows to the top, resulting in the quote symbols getting hidden at the upper container boundary. The same would happen to even longer texts.
• Testimonials without an image might get additional width in any case.

.stories__story__image.empty + .stories__story__quote { width: 30rem (instead of 20) is not a generic solution, but a pragmatic workaround that might solve this specific problem and give the testimonial section a more individual, crafted look. It does in the case on the right, but it somehow deteriorates the shorter text-without-image case on the left:

As we control our backend and we can analyze the CMS content, we can set an additional class name to restrict the fix to the actual problem, just like we already do when setting the empty class name.

CSS: .stories__story__image.empty + .stories__story__quote.long

PHP: if (strlen($current_content) > 360) { echo 'long'

Then it looks like this. We might probably have to refine this workaround and find a more generic solution, maybe revisiting this comment when (and not before) new testimonial content does not fit.

from kleiderordnung-berlin.