Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reponsive features and fixes #36

Merged
merged 15 commits into from
Oct 8, 2018
Merged

Reponsive features and fixes #36

merged 15 commits into from
Oct 8, 2018

Conversation

robinmetral
Copy link
Contributor

@robinmetral robinmetral commented Sep 19, 2018

Closes #7:

  • Responsive sections
  • Responsive featured items
  • Responsive nav
    • make logo fixed
    • hide scroll bar
  • Responsive typography
  • Responsive spacing

Fixes #38

On the homepage for example, stack the image and the message when any
becomes smaller than 50rem.

Remaining issue: since the image and message are alternated, in some
cases the image stacks below the message
Add a @media query to change featured items flex direction from row
(default) to column on screens narrower than 800px
Remove the flex wrap properties and use instead a media query. This
makes it consistent with the featured items, and allows for a fix of the
image/message order issue.

On smaller screens (under 800px) the image will always display above the
message.
…eens"

This reverts commit 4c87ed8f647b041648cb854453653499c14acfaa.
This reverts commit e647ef9bd7d29a3650e44c914e1f639b57a3a8fd.
 - Change header layout to include both navs into one (also good for
 accessibility)
 - Don't let logo scroll
 - The nav scrolls when overflowing
 - Fix styles to apply to nav instead of header
The scroll bar can not be hidden in Firefox (Gecko) using CSS as of 2018
See: https://stackoverflow.com/a/6165489/7770081
Possible solutions: https://stackoverflow.com/a/16671476/7770081
@robinmetral
Copy link
Contributor Author

About typography: reducing the font size overall, as we talked about, fixed it. I don't think we need to reduce it further on mobile.

@robinmetral robinmetral changed the title [WIP] Reponsive site Reponsive features and fixes Oct 5, 2018
@robinmetral
Copy link
Contributor Author

You can merge @bogreudell! I'll work on specific fixes in separate PRs

@robinmetral
Copy link
Contributor Author

Commit 14970e4 fixes issue #38, apart from a tiny bug on textareas:

The textarea's width is misbehaving because of a hardcoded HTML cols="40"; rows="10", probably straight from Wordpress.

@bogreudell is there a way to disable this in the Wordpress form? I'll style the textarea with CSS only.

@bogreudell bogreudell merged commit b2883bb into wikitongues:master Oct 8, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Video submission form overflows on mobile ➡ Reponsive ⬅
2 participants