search

wikasa / wikasa-frontend

0 stars 0 forks source link

Course card gets messed up when resized after a certain breakpoint #29

Open ramaman opened 10 years ago

ramaman commented 10 years ago

image

image

ghost commented 10 years ago

You resized the browser below 320px width. Responsivity does stop at breakpoint below 320px. Its an intended experience, also a common decision (even youtube do the same). Afterall, if the user browser width do below 320px, the resulting UI should not look like the screenshot you posted here.

It should be like this: screen shot 2014-02-09 at 11 24 42 pm

What happen here was because, the html <head> didn't correctly written.

We missing these metas

<!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

I provided them (on each of html template i wrote), so the site could be mobile friendly.

But i see none of them exist on the current site

If you curious this is what youtube do to tiny screen screen shot 2014-02-09 at 11 25 00 pm

I do the tests on mobile media. Using several user agents. And the tests passed like I expected. I guess this bug should not addressed to my side of code.

ramaman commented 10 years ago

The screenshots i posted were taken from branch ux2 wikasa-frontend example, not from wikasa.com website. If common convention says that 320px is the lowest breakpoint, it should be ok for now

The meta tags seem to be the cause of missing functionality on wikasa.com site. Yes you are right, the bug is on our side, should be good after adding them.

I updated our ux2 branch of wikasa-frontend with the latest verson. However, there are two issues here:

1 - There are two pair of scrolls horizontally and vertically, this is taken directly from wikasa-frontend.:

image

This is caused by on /base/_element , overflow:scroll is declared twice, I removed the overflow from html and everything turns out to be fine. Please confirm whether deleting this does not cause additional unintended error:

// ----------------------------------------------------------------------------\
// HTML.
// ----------------------------------------------------------------------------/
html {
    font-size: 100%;
    height: 100%;
    min-width: 320px;
    overflow: scroll;
}

// ----------------------------------------------------------------------------\
// Body.
// ----------------------------------------------------------------------------/
body {
    display: block;
    min-width: 320px;
    overflow: scroll;
    height: 100%;
    color: $black;
    font-family: $ff-sans-regular;
}

2 - The header looks fine, but search bar is missing

image

Again, this is taken directly from wikasa-frontend code, without any modification from our side.

ramaman commented 10 years ago

About breakpoint lower than 320, youtube should not be a good example here as it has completely different version for mobile, that is why it looks like that. If you open youtube site from mobile device then it renders another interface. Therefore, I take bootstrap for a better example:

image

Here we see that even at 2xx pixels, the images are displayed correctly. However if 320px turns out to be the smallest for most devices, this specific issue is not a priority at the moment. The two issues mentioned on my previous comment should be the focus.

ramaman commented 10 years ago

Lets leave this thread for issue #1, issue #2 should be part of https://github.com/Qometlabs/wikasa-frontend/issues/27