Improve layout for mobile about codecombat HOT 15 CLOSED

I think I'll take up modifying some of the pages to look at least not broken on mobile, but is there any prescribed approach to the mobile solution at the moment, or should I just go add the mobile functionality the way I believe would be best implemented, and then changes can come from there.

from codecombat.

The most likely solution given what we already have would be to use Bootstrap's fluid grid system. But go ahead and do what you think would be best!

from codecombat.

Ok, yeah that was basically the plan. My personal website is built on a modified bootstrap grid, so using that for the mobile here will be fine. So far planning everything out in my head it should be relatively straight forward to get most of it look at the very least not broken on mobile.

from codecombat.

@chloester pointed out that there already are media-query-based grid styles included in our Bootstrap setup, but that they were part of what's broken about the layout as is. (This may be a clue; I'm no media query maestro.)

from codecombat.

The way bootstrap grid works is under a certain size it breaks down, or at least all of the implementations I've used. But, to put it short, basically the gird is usually for screens greater than a certain size.

Look at the levels page to see that behavior of the grid just stopping working. But one of the biggest problems is that elements can actually end up being larger than the grid says they should, which can totally mess things up.

But yeah, once again it basically just is adding media quires to fix certain behaviors. Like for the homepage it will mean just adding a media query to define all of the mobile behavior.

from codecombat.

I think making the move to Bootstrap 3 (#89) should be prioritized before writing too many media queries. The further the dig into 2.3.2 might make digging out more difficult.

from codecombat.

I'm just going to make a quick, and temporary solution on the main pages that are likely to be visited on mobile. Upgrading to Bootstrap 3 will be a more comprehensive update, so this is the type of thing that can be used as a bandage, until the migration to Bootstrap 3 is complete.

from codecombat.

Example page to fix for mobile: #131

from codecombat.

Okay, you know what. I've changed my mind, I think I'm going to do as mcfarljw recommended and help do some work towards migrating to Bootstrap 3. I don't think it would make digging out any harder as he mentions because it would be a simple matter of just removing the mobile fixes, and then fixing them the right way. But it would mean having to do all of the mobile fixes twice.

from codecombat.

@TomSteinbrecher do you guys have a branch put together for this? I'd be happy to help.

from codecombat.

Wish we did, although if you want to start working on this yourself go for it. I'm a full time student so I don't have tons of time work on stuff, and recently I've been wrangling with my Ubuntu install more than coding because of some weird bug maxing out CPU usage. Although I should have that fixed tomorrow, but yeah totally go for it if you want to. Although as you said it might be a good idea to set up a branch strictly for this.

from codecombat.

A user commented today that they tried the site on their iPad and they either didn't see our warning, or ignored it, tried the game, got booted back to the homepage, and contacted us. So yeah, would be great to make it more clear that we're not supporting mobile.

from codecombat.

I'm tackling this now, let me know if there are any progress/changes I should know about

from codecombat.

https://app.asana.com/0/15388757953815/20686183437394

from codecombat.

I call it good enough with my recent work to make the homepage look a'ight on small screens.

from codecombat.