COVID-19 is impacting countless small businesses across Canada, we all face uncertainty. Several colleagues and I asked what we could do to help? After a weekend of non-stop coding we’ve put together #CovidImpact, a FREE Small Business Care Package which features: A curated list of programs to help them through the crisis. Real-time news relevant to Canadian ventures Simulation tool to see how their business may be affected across various scenarios depending on how long COVID-19 drags out for. Together, Canadian businesses will get through this by supporting each other! CovidImpact is built in Vue with Javascript, HTML and CSS files. The project utilizes various Bootstrap-Vue components and newsapi.org to get the latest business news. The app is hosted on S3 and uses serverless functions for a mailchimp newsletter.
On the financial aid page, the bottom card overlaps with the footer element. This is a pretty bad issue! On mobile, it isn't even the bottom card, but the 3rd/4th one depending on the viewport height of the device.
What needs to be done:
Seemingly, the root cause is that the footer isn't anchored to the bottom of the container containing the cards, so we just need to fix that.
Criteria of success:
Cards don't overlap the footer anymore, and the footer is rendered strictly below all of the cards.
Overview:
On the financial aid page, the bottom card overlaps with the footer element. This is a pretty bad issue! On mobile, it isn't even the bottom card, but the 3rd/4th one depending on the viewport height of the device.
What needs to be done:
Seemingly, the root cause is that the footer isn't anchored to the bottom of the container containing the cards, so we just need to fix that.
Criteria of success:
Cards don't overlap the footer anymore, and the footer is rendered strictly below all of the cards.
Documentation:
Screenshots of the bug in action:
Desktop layout:
Mobile layout:
Stakeholder:
@Aliserag