Fix content alignment for mobile devices

[daemon1024]

No description provided.

[palnabarun]

@daemon1024 Thank you for your contribution! 🎉

Since you are at it, can you also have a look at the footer?

The above screenshot is taken at 553x812 resolution.

[daemon1024]

@palnabarun Would this be the desired footer for devices with width < 768 ( currently set for width < 512 )?

[palnabarun]

I was more worried about the alignment at that width ranges.

In an ideal world, the flow should be like:

1. If all 3 divs can be accommodated in the same row, do that.
2. If all but the last div can be accommodated in the same row, drop the social icon div to next row and make all the divs centered like:

 LOGO <-> COPYRIGHT
<-> SOCIAL ICONS <->

3. If only one div can be accommodated in a single row, push all three to separate rows and make them center aligned.

Now, the screen widths at which the transition between 1, 2 and 3 have to be done can be decided independently.

PS: The stop can be changed to a bit higher too.

[daemon1024]

@palnabarun handled the 3 cases from what i interpretted. I didnt change the stops since they seemed fine to me.

The above screenshot is taken at 553x812 resolution.

[palnabarun]

@daemon1024 Awesome! The transition looks neat now.

[palnabarun]

I am approving this PR for now. But, will wait for others to take a look at the changes and comment if needed.

Thanks again for your contribution!

[daemon1024]

@palnabarun Great!

[sayanchowdhury]

The design team gave the design for the footer today morning. https://www.figma.com/file/l3fowoKJ1OAyXRd7j095r5/PyconIND-Assets?node-id=815%3A0.

The gradient has to go away and the items have to be stacked. The idea of the scroll was to denote the end of the scroll.

[daemon1024]

@sayanchowdhury

The gradient has to go away

Got it. Will remove that.

and the items have to be stacked.

In the design file i only see design for mobile and ipad, do you want it to be the stacked for desktop too or I should leave that. Also the iPad design is contradicting with what @palnabarun suggested in

2. If all but the last div can be accommodated in the same row, drop the social icon div to next row and make all the divs centered like:

 LOGO <-> COPYRIGHT
<-> SOCIAL ICONS <->

This is what i updated in last commit so I will revert it and make it column stacked all the way if you say so.

The idea of the scroll was to denote the end of the scroll.

I didn't get what do you mean by scroll here.