Custom CSS for 3 columns layout

Hello Sakin, I'm trying to resize the columns of the 3 column layout of catch evolution theme. entering the following code in CSS custom:

.wrapper {
	margin: 0 auto;
	width: 1300px;
}
.three-columns .content-sidebar-wrap {
    float: right;
    width: 1050px;
}
.three-columns #primary {
    width: 740px;
}
.three-columns #secondary {
    width: 300px;
}
.three-columns #third {
    float: left;
    width: 240px;
}

or, for a max width of 1200px:

.three-columns .content-sidebar-wrap {
    float: right;
    width: 980px;
}
.three-columns #primary {
    width: 700px;
}
.three-columns #secondary {
    width: 270px;
}
.three-columns #third {
    float: left;
    width: 200px;
}

the theme runs very well on desktop. It has the sizes I'm really need. But, going mobile, the theme completely messes up! The columns don't get on pile, but show as they were on a desktop. I'm sure I'm missing something in the customization code to be responsive. can you help me? the site is http://fluegasknowhow.com/flue-gas-properties/ currently none of the above mentioned custom code are applied. thank you!!!