Follow-up from "Responsive and mobile"

[cyntss]

The following discussion from !166 should be addressed:

• [ ] @cyntss started a discussion: (+2 comments)

  In mobile, can we break the text and image in the about us page so that the image is first and the text below? (or the opposite if Zvezda designed it to be that way)

[cyntss]

I'm adding below images taken from my mobile: The text to join the community is not visible. I suggest removing the Slack image in mobile perhaps? Also align the text to the left (mobile and desktop):

The title for contributors is not in the center:

In mobile we should collapse the top by default, and the size of the main title is decreased too, to fit all in 1 line. This is how it looks like now, which makes it hard to see any icon:

The cookie breaks in mobile:

We must increase the breakpoint. In the design system we use "less than 770". I suggest we use the same:

Also, the EOS icon logo is missing some padding on the left side on mobile

[StarTrooper08]

Its fine on my Android device

[StarTrooper08]

I have tried the website running on my Android tablet. It worked fine there too. But when I inspected different screen sizes and resolutions using a chrome browser. I found that the alignment & position of elements in the website break. On a few devices, UI elements remained aligned and positioned properly and on a few devices, it's not the case.

SS of devices on which UI is breaking:

Nexus 10

iPad pro

Surface pro 7