[Enhancement]: Make ZBunker Responsive

[P0intMaN]

zbunker-website project is nearing its end. There are several major milestones to be touched before deploying it finally and that includes this issue.

As of now, zbunker-website has horrible responsiveness. Perhaps due to the sheer amount of usage of absolute positioning. Switching to Flexbox and setting up breakpoints will help solve this problem.

This issue is very peculiar because it is relatively easy to work upon yet can be very tiring to go through all HTML files and making them responsive. Adding a good first issue label so that newcomers can bag couple of contributions from this issue.

[Sen-442b]

I can try working on this issue, could you please assign it to me

[P0intMaN]

Hi @Sen-442b

Thank you very much for your interest in this project. Let me brief you a little bit about what you are going to undertake:

You would be handling the responsiveness of the website. As of now, zbunker-website is not at all responsive. You may take one HTML file at a time and make it responsive.

It seems like you are a first time contributor of this project. Make yourself comfortable with the platform and feel free to drop your queries. I am more than willing to answer them.

[P0intMaN]

You may go ahead and give the following a quick read. Might as well drop a suggestion or two if you like:

• 122

[Sen-442b]

@P0intMaN On it

[Sen-442b]

@P0intMaN Hey I have tried mitigating the db using flask db upgrade but my cmd is not recognizing flask even after setting it as an environment variable, Should I create a separate virtual environment for flask to run this command??

[P0intMaN]

Did you try the following commands in your terminal?

set FLASK_APP=run.py
$env:FLASK_APP="run.py"
flask run

If you have probably ran all the above commands and still receive the error, then try restarting your VSCode once and do it again.

[P0intMaN]

In case you don't want to run DB migrations (since I noticed that the initial migrations has already been done and pushed into GitHub) , you can also run flask websites without the flask keyword. Try the following in the terminal and it will be good to go:

python run.py

[Sen-442b]

@P0intMaN Hey, in the about page my content is overlapping the footer event after removing the absolute: position from it and the footer itself has no negative z-index to change its stack order

[P0intMaN]

Interesting observation. Alright, so what do you propose? I don't have that much Idea when it comes to positioning and layouts. I guess this may be fixed by creating another div of position relative and / or increasing the height of the current div ( tbh, I have no idea ).

Did you come up with any solution to fix this?

[P0intMaN]

Or maybe, we can use Grids. This would preserve the graffiti on above us page as is and would also maintain the height of the webpage (pushing down footer, automatically)

[Sen-442b]

Interesting observation. Alright, so what do you propose? I don't have that much Idea when it comes to positioning and layouts. I guess this may be fixed by creating another div of position relative and / or increasing the height of the current div ( tbh, I have no idea ).

Did you come up with any solution to fix this? Yeah i'm working on that only, will let you know if there is an update

[P0intMaN]

Due to inactivity, I am removing the assignment. If any of you would like to work on this issue, just comment and I'll assign it to you.