Making the app responsive

Responsive Web Design (RWD) is a design approach where the layout of an app adjusts automatically to provide the most optimum viewing experience on the device or screen size on which the app is being viewed.

Responsive designs are built by making use of the CSS3 media query feature, where one can apply different CSS properties for an element based on certain conditions that it satisfies.

In our current application, we would like the View Summary page to display the graph and expense details side by side when viewed on a large screen. However, when viewed on a mobile, we would like the graph to show up the preceding details table in a single column.

While doing so, we also need to make sure that the graph scales automatically, depending on the screen size.

Adding the CSS media query

As we want to alter the positions of the graph and details table depending on the screen size, let's first wrap each of them within individual divs for easier manipulation.

Please update the...