Make the WordCamp Coming Soon page responsive

[nvwd]

Add media queries to make the page behave well on all screen sizes.

[nvwd]

display width over 725px

[nvwd]

display width 600px

[nvwd]

display width 550px

[nvwd]

display width 320px

[Kau-Boy]

I was going to report the exact same issue. I also solved the issue with the non-responsiveness, but without using the calc() function which is unforntuately still not widely supported, especially amoung Android browsers.

Hope to see that patched soon.

[nvwd]

@Kau-Boy

Good point. I do forget some people will use the native browser on their tablet instead of Google Chrome.

[iandunn]

In 1002:

WordCamp Coming Soon Page: Add basic responsive styles.

props nvwd, Kau-Boy
See #616

[iandunn]

It seemed like both patches had some unnecessary changes and were hard to interpret at times, but had pretty similar results, so r1002 is a stripped-down commit with the most important parts of both.

Now that the big problems are out of the way, I think it'll be easier to focus on any little problems that remain. Do either of you see any?

Keep in mind that general visual improvements are outside the scope of this ticket, they should go in #334. Before you upload a patch, make sure you review the output of svn diff to see if it's manageable. The patch should be the minimal set of changes required to achieve the goal, so things like flattening the indentation add a lot of noise and make it hard to see what's actually going on.

[nvwd]

Looks good to me.
Only thing that might be nice is to shrink the main padding ( #wccsp-container ) for widths below 480px.

I will stop 'fixing' code/css indentation which adds to diff bloat ;-P

[iandunn]

I kind of like the padding, but I can see how it might be nice to get rid of the .wccsp-box borders and their padding. That's getting more into design choices, though, so I think we should leave that for #334.

The indentation in 661.patch was actually fine, I was referring to the flattened hierarchy in 661.2.patch. I think matching the CSS hierarchy with the HTML hierarchy makes it easier to quickly scan a file and understand the structure without having to read it closely.

The CSS style guide doesn't mention it, but Core uses a flat hierarchy, so there's a good argument to be made for switching, but a change like that would be better for a separate ticket.

[Kau-Boy]

The only issue I see is the width of the contact fields. They should expand to 100% at least on mobile devices (see the new screenshots). The rest look OK.

[iandunn]

Replying to Kau-Boy:

The only issue I see is the width of the contact fields. They should expand to 100% at least on mobile devices (see the new screenshots). The rest look OK.

Yeah, that's working in some browsers (e.g., Firefox), but not all. That's not a responsive issue, though, so I think we should fix it in #334.

Seems like this is good to close, but feel free to reopen if you spot anything else.