Transform non responsive html to responsive html

Question

You have to use css media queries to do that. Just remember, IE7 and 8 doesn't accept media queries and is not responsive. You can look at my answer on this issue here.

If you have a look at the twenty thirteen themes' style.css, you will see that media queries start at line 2575. It is this media queries that make your theme responsive. In you code you are using in-style css, which I strongly discourage. This will give you issues when making your theme responsive.

Take for example this line

<div class="slides_container" style="overflow: hidden; position: relative; display: block;">

You should write your html as follows

<div class="slides_container">

You should move your styles to your style.css like this

.slides_container {
    overflow: hidden; 
    position: relative; 
    display: block;
}

Say you want to make this responsive, and you need position: fixed for smaller screens, do something like this

.slides_container {
    overflow: hidden; 
    position: fixed; 
    display: block;
}

Now you need position: relative; and font-size: 20px;at screen size 650px and bigger. This is where the media queries come in. Just a point of note, you don't need to copy all the elements into your media query if they don't change values, just add elements that are changing. You can also add other values that is not specified generally.

You style when then looks like this

 @media (min-width: 650px) {             
   .slides_container {
       font-size: 20px; 
       position: relative; 
   }
}

You can have multiple queries for the same element, as long as your screen sizes differ. For instance, you need the font size to change to 24px for screens bigger than 1200px. You will then do something like this

 @media (min-width: 1200px) {             
   .slides_container {
       font-size: 24px; 
   }
}

Note that you again don't have to set element position as it is not changing for screens bigger that 1200px

I hope this will help to achieve your goal.