Side project using what I learned working on 1st two fCC certificates

I’m looking for some project feedback on a side project I’ve been working on.

I do know it is not at all responsive which I know should be fixed even though the target audience will almost certainly be using it on a desktop.

Aside from responsiveness, the UX/UI is bugging me. I know there are things that just aren’t right but I’m having a little trouble figuring out exactly what I want to or should change.

The idea behind the project is that this page will allow decision makers to find out if requested markets for a fund launch will be available for a target date. Depending on the results the launch date can be moved.

  1. Fund details need to be added and updated.
  2. Markets need to be selected for day one or ASAP.
  3. Data can be downloaded as Excel or CSV.

This is a link to the CodePen:

Even if the target audience is using it on a desktop it still needs to be responsive since the user can both change the view port width and text size. Right now if I narrow the browser too much or shorten it too much I lose content and I can’t get it back because there are no scroll bars. Increasing the text size also has the same effect.

The best way to handle responsiveness is to start narrow and work your way wider. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. This will be your base CSS. Then slowly widen your browser until you feel you have enough horizontal room to start rearranging elements for a wider view port and set your break point there (using min-width and ‘em’ for the value). Repeat this process until you don’t need to rearrange any further.

It is much easier to work this way then to create your ultimate wide screen layout and then have to go back and figure out how to make it work for narrower view ports.

Thanks for the feedback. You’re right, assuming this will only be viewed on a wide screen layout and at a single text size/zoom level that I tested it on is an incredibly poor approach. In the past when I have tested for responsiveness I have only changed screen size. Thanks for mentioning that even at the same screen size there can still be huge differences due to changing text size and zooming.

I started working on making this more responsive and also made some UI/UX changes to include directions for using the app and changing the way that markets are selected.