CSS

While preparing mobile version we have to understand that identical minization of header will result logo problems

Outside of the body container and sidebar we have backrgound elements in viewport of desktop (such as the image of clouds in our case) which physically impossible to embrace in responsive version because of the small viewport size. In this case the only solution is to make these elements invisible. Be noted that can be eliminated only the design elements which doesn't contain any functionality.

[id^="cloud"] { display: none; }

As it was mentioned http://emergencysoft.com/ website is custom built and consists of header, body and footer elements. Assignment of 100vw* value to the wrapper enable the body element to fit relatively in any device viewport. The neccesary coding will be:

.justify { width: 760px; } 

.justify { width: 100vw; }

* vw - relative to 1% of width of viewport.

First, we set breakpoints for two kind of devices (tablets and smartphones). We consider the minimum  width of a regular tablet as 768px and the minimum width of smartphone as 326px (for iPhone 5). It is also considered retina design for the rest of the mobile versions (between 320px and 767px). 

@media (min-width: 768px) and (max-width: 1023px) @media (max-width: 767px)

Large tables are a real headache for responsive web design. Vertical alignment of columns will distort the core idea of positioning data in table. So, if the table contains more than two columns (e.g. pricing packages, comparison data, etc), there is no way to make it responsive.

So, the only solution is to put the table into the container element with limited width (device-width) and enable horizontal scrollbar for mobile browsers.

Container's overflow in horizontal X axis should be solved by the scrollbar.

Usually the search form doesn't occupy too much place, but in case of mobile devices it can be a problem.