Fixed style/responsiveness issues on actifit.io

in #actifit5 years ago (edited)

Pull Request:
https://github.com/actifit/actifit-landingpage/pull/15

This pull request contains some style fixes that all improve readability and usability, especially on mobile and tablet size screens.

Mostly I worked on the menu bar which had several issues:

before:
before1
after:
after1

before:
before3
after:
after3
(There's still a certain screen size where this overlapping happens but it's much better now.)

The expanded menu on smaller screens had some issues as well.

before:
before4
after:
after4

before:
before5
after:
after5

And I prevented this overlapping of the box in the header and the content below.

before:
before6
after:
after6

And one more little readability issue.

before:
before2
after:
after2

And I removed some debug output from the console, as a good practice. Keep the code clean and the console empty. ;)

I looked through the website again yesterday and I found many more issues or things that can be improved at least, like the profile page. I'm now going on vacation next week but after that I'll continue to work on the website.

Sort:  

Thank you for your contribution!

  1. Have you thought about using Bootstrap (https://getbootstrap.com/) so that most-of-the-time, you don't have to worry about the responsiveness?
  2. IMO, debug output to console is fine, just not too verbose.

The page does look better!

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Have you thought about using Bootstrap

Actually it does use bootstrap.

Thank you for your review, @justyy! Keep up the good work!

Thank you for the help with Actifit development !

Hi @mkt!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @mkt!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.19
TRX 0.16
JST 0.033
BTC 64308.31
ETH 2810.43
USDT 1.00
SBD 2.65