Footer layout gets messed up in mobile view

[VipulKhandelwal1999]

General Info

• UUID: af292e10-b7c0-4a9b-866a-af13868920ba
• Browser: Google Chrome
• OS: Windows

Description

Footer Layout becomes messy in mobile view and donate button touches upper paragraph. Privacy policy and terms and conditions gets messed up due to their alignment. This issue can be fixed by changing their alignment to center.
Sir, please assign me this issue i will fix it asap.

Console Errors

[paglias]

Thanks @VipulKhandelwal1999 , unfortunately right now the Habitica layout is not optimized for mobile use. I'd say go ahead and fix it but let's wait for @Tressley , in case there are different plans

[Tressley]

No plans for a mobile footer at the moment. I agree centering the text would help. Let's go ahead and do that.

[paglias]

Marked as help wanted, @VipulKhandelwal1999 let me know if you want to tackle this!

[VipulKhandelwal1999]

I will work on this issue. Thanks for your response @paglias

[Alys]

@VipulKhandelwal1999 Thanks! I've marked it as in progress for you.

[shanaqui]

Hi @VipulKhandelwal1999, are you still working on this? No rush, we just try not to let issues go stale! If I don't hear back from you, or if you're not interested in working on this anymore, I'll mark it as help wanted again in a week's time. 👍

[VipulKhandelwal1999]

@shanaqui i have fixed footer but i will send you PR after my another PR gets reviewed. I have send another PR already which was for skill layout. As soon as your review on Skill layout gets completed,i will send you PR.

[VipulKhandelwal1999]

@shanaqui if you want the output image after fixing footer i can send it to you.

[shanaqui]

@VipulKhandelwal1999 No, I don't do reviewing of PRs anyway. But you don't need to wait -- you can start getting this one sorted out right away as well. No limit! :)

[Gav80794]

Hi! I'd like to contribute.

[VipulKhandelwal1999]

@VipulKhandelwal1999 No, I don't do reviewing of PRs anyway. But you don't need to wait -- you can start getting this one sorted out right away as well. No limit! :)

Ok i will send you PR right away.

[shanaqui]

@Gav80794 Someone else is already working on this issue. :) You're welcome to browse the "help wanted" tag to see open issues!

[VipulKhandelwal1999]

@paglias Take a look at my PR.

[paglias]

@VipulKhandelwal1999 the pr is closed

[VipulKhandelwal1999]

@paglias I am sorry for that. It waz showing lint error. I will send it again after fixing those errors

[paglias]

@VipulKhandelwal1999 no worries, you can keep the PR open and just add more commits to it, btw you can have multiple PRs active at the same time by using different branches

[VipulKhandelwal1999]

@paglias thanks for telling that because i was bit confused how to maintain both. That's why.

[shanaqui]

@VipulKhandelwal1999 Hi! Are you still planning to work on this issue? Can you please check in to let us know whether you're still working on this? If not, or if we don't hear from you within about a week, we'll set it back to Help Wanted so someone else can have a go. There's no rush, just checking it hasn't gone stale! :)

[VipulKhandelwal1999]

@shanaqui I have already completed this I will send you PR right away.

[shanaqui]

If you link the PR here, I will link the two so I can check on what's happening with it, and so it's easy for someone to close this when the fix is merged! :)

[VipulKhandelwal1999]

Ok @shanaqui Currently i am fixing the skill layout bug. I have fixed this footer bug but i have already done commits related to the skill section. So if I will send you PR, it will contain those commits as well. So either i will send after the skill bug PR is completed or anything you would suggest..

[VipulKhandelwal1999]

@paglias Please help me with that. Because you already know what i am talking about.

[paglias]

The best option would be to create a separate git branch for the new pr, apply the commits there and send it, but if that's to complex it's also fine to wait until the other pr is merged

[VipulKhandelwal1999]

@paglias As now you have merged PR which was related to skill layout. Now it's showing

Now what should i do work on this one. Should i make another branch and then work on it but it will also contain all the extra commits as you can see in the Screenshot. Please tell me What should i do?

[paglias]

What you should do is:

• git fetch upstream
• git checkout develop
• git reset --hard upstream/develop
• git push origin develop --force

Now your develop branch will be up to date with the develop branch here

Then:

• git checkout -b fix-12549 to create a new branch up to date with develop to work on this one
• make changes
• commit
• git push upstream fix-12549
• create a pr using that branch

[VipulKhandelwal1999]

@paglias Thank you very much :)

[VipulKhandelwal1999]

Screenshot after fixing

Desktop View:-

Mobile View:-

[paglias]

In the desktop view it looks like there's no padding on the left side, I would suggest to use bootstrap's grid https://getbootstrap.com/docs/4.5/layout/grid/ and adapt it to the mobile view with the responsive classes

[VipulKhandelwal1999]

@paglias I have replaced all my self-made classes with the bootstrap one. And after fixing the view is below:-

Desktop View

Mobile View

[VipulKhandelwal1999]

@paglias I think i have fixed this issue. Take a look whenever you are free.

[VipulKhandelwal1999]

@paglias Can you please take a look at the PR?