Views Slideshow with jCycle - Making it 100% flexible repsonsive
An easy way of making the slideshow responsive is by overriding the css something like below:

.views_slideshow_cycle_main {
  width: 100%;
  float: left;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .field-content {
  max-width: 100%;
  width: 100%;
}
.views_slideshow_cycle_main .field-content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


The changes you where doing might be getting overriden by default styles as those were taking the precedence.

Reference: views Slideshow for Responsive design



Alternate solution:
Give a try to Flexislider module: Flex Slider module integrates the Flex Slider library with Drupal and several contributed modules which allows you to build responsive, resizable slideshows. Meaning the slideshows automatically adapt to the size of the browser window or device.

Some features of FlexSlider slideshows include:


Touch enabled nagivation
Keyboard navigation
Configurable slide animations
Multiple sliders per page