Swag-for-dev: Bug: Website layout broken on mobile devices

[plibither8]

• [x] I've checked that this isn't a duplicate issue.

The website layout is broken after the addition of the description. I've attached a screenshot:

This is because of the flex display set on the div, which has been given a height of 40vh (to center the title and subtitle). We should consider removing the height attribute (or at least make it min-height).

[swapagarwal]

Ah, a classic case of "It works on my machine!" (or in this case, my mobile).

[hugovk]

Also broken for me (Chrome, Android).

[swapagarwal]

Oops. Is there a way to catch such things in development itself?

[aslafy-z]

Yep we could use tools like browserstack to check this kind of errors, at
ci time.
We need to create a ci pipeline (codeship is in the badges?).

Le jeu. 4 oct. 2018 à 11:03, Swapnil Agarwal [e-mail] a
écrit :

Oops. Is there a way to catch such things in development itself?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/swapagarwal/swag-for-dev/issues/82#issuecomment-426941547,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHz83gW9wcNB3RTYmid9dAApItNxxW7jks5uhc7ugaJpZM4XHpD8
.

[plibither8]

@swapagarwal what I do is open Chrome Dev Tools and enable responsive screen. There we are given the option of simulating mobile displays of various smartphones in the market currently.

[swapagarwal]

@aslafy-z I signed up for BrowserStack. How does it exactly fit into picture? Do we write a selenium test script and run it on different screen sizes? Or something else?

[aslafy-z]

We need to have a test framework (not needed but better), add a test case for each platform we want to test on and use a CI to trigger them.
As seen there: https://www.browserstack.com/automate/node#testing-frameworks
Maybe we can discuss this on #79.

[swapagarwal]

If anyone wants to try BrowserStack, just shoot me an email and I'll add you to the team.

[swapagarwal]

@plibither8 Is this still an issue?

[plibither8]

83 fixes it! Should we merge?

[swapagarwal]

I thought the issue was with the banner, no?

[plibither8]

Nope, it was because of the title div being set to an absolute height — nothing to do with the banner 😄

[plibither8]

83 merged