title: CSS Responsive Slider Turn Vertical When Mobility
body: <p>I'm currently using <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick Slider</a> to start to create a responsive Slider on my web page.</p>
  
  <p>But I want the slider to turn all the images to a vertical listing. It will be horizontal full width when full screen, then when it went to mobility all the images will be split to vertical to view.</p>
  
  <p>I tried to search w3school for "media" method to change in the CSS files as shown below :</p>
  
  <pre><code>@media only screen and (min-width: 370px) {
      .slick-slide img
      {
          float: left;
          display: block;
  
          overflow: hidden;
          list-style-type: square;
          position: relative; /* for the negative top distance to work */
          display: inline-block;
          clear: left;
      }
  }
  </code></pre>
  
  <p>But no luck, there was no response at all. How can I make my slider the same as <a href="http://ishimoto-demo.squarespace.com/cujqsjul761xhugm0z07qodf9ozpot" rel="nofollow noreferrer">Square Space</a>? or are there any other methods I can try?
  Thanks!</p>