# Mobile Responsiveness

Let's say you just designed a new page. It looks fantastic, and it follows all my standards and guidelines 🤗.

BUT WAIT!

You opened it on your phone, and it looked like some random art by Picasso or Van Gogh.

Use the mobile view feature in the Wix editor to rearrange the content See: https://imgur.com/5MFgqT0.png (opens new window)

# Why?

This is because mobile responsiveness does not exist in Wix.

To explain it better: imagine you have a large textbook (12" x 9"), and you want to bring it with you on a road trip (just pretend you do because you have an exam next week). Your parents, Wix.com (opens new window), says it's too big to fit in a space (10" x 5"), so what they do is chop off the overlapping sections of the book so it fits in the space. Sure, it gets the job done. But in practice, the textbook is unreadable.

As a result, you struggle on the exam because most of the information is missing or misplaced.

Now circling back to the OKTSA website, if a member can't get all the information they need (i.g. they are on phones or tablets), there's a chance they will miss out on important information (i.g. submitting work logs, sources, etc).

# Best Practices

# Formatting text

Continue to align all the text to the LEFT just like you did in desktop mode. Do not center as it breaks consistency.

# Whitespace

Ensure that there is still adequate whitespace between paragraphs of text, titles, and buttons.

Hover your mouse at the TOP border of the footer, and you should see a button to DRAG the footer down. You basically want WHITESPACE between the content and the footer.

See: https://imgur.com/5M1cBxg.png (opens new window)

# Examples

# Recommended

Good

Plenty of whitespace is used without taking up TOO much space. The visitor doesn't feel claustrophobic, and it also looks visually appealing 😄.

Good

Plenty of whitespace is used to distinguish the text from the buttons AND the content OVERALL from the footer.

# Not Recommended

Not recommended

Not Recommended

There is no whitespace. Also, the title is aligned to the CENTER, which breaks the consistency of aligning to the LEFT.