responsive web design - @media screen guidance

Question

I am trying to teach myself responsive web design, but I don't at all understand how I can do this -.-

When my browser is 1200px width or more, obviously I have centered it to sit in the middle along with everything else, but when I make it smaller, this row/section is not modifying itself. I have mucked around with @media screen etc, but i cant get it to work. Could someone please help me get this to work?

The code for this row is:

.row-circles {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    font-size: 18px;
    height: 450px;
    line-height: 40px;
    position: relative;
    width: 1263px;
    margin: 0 auto;

}

.steve1 {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    float: left;
    font-size: 18px;
    height: 406px;
    line-height: 40px;
    margin-bottom: 20px;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: center;
    width: 390px;

}
.steve2 {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    float: left;
    font-size: 18px;
    height: 406px;
    line-height: 40px;
    margin-bottom: 20px;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: center;
    width: 390px;
}
.quentin {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    float: left;
    font-size: 18px;
    height: 406px;
    line-height: 40px;
    margin-bottom: 20px;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: center;
    width: 390px;
}

.quentin h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.steve1 h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.steve2 h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.quentin p {
    margin-top: -20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.steve1 p {
    margin-top: -20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.steve2 p {

    margin-top: -20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}


.img-circle {
    border-bottom-color: rgb(90, 90, 90);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(90, 90, 90);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(90, 90, 90);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(90, 90, 90);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-top-style: none;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: inline;
    font-size: 14px;
    height: 140px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    width: 140px;
}
.img-circle img {
    width: 140px;
    height: 140px;
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: 50%;
    border: 0;
}
.circles h2 {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    font-size: 30px;
    font-weight: normal;
    height: 33px;
    line-height: 33px;
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: center;
    width: 456px;
}
.circles p {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    font-size: 14px;
    height: 80px;
    line-height: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    text-align: center;
    width: 436px;
}
a.btn.btn-default {
    -webkit-user-select: none;
    background-color: #83d3c9;
    background-image: none;
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(204, 204, 204);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(204, 204, 204);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgb(204, 204, 204);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 200;
    height: 34px;
    line-height: 20px;
    margin-bottom: 0px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    width: 111.031px;
}

<div class="width-container">

                <div class="row-circles">
                    <div class="steve2">
                        <img class="img-circle" src="images/profile2.jpg" alt="Steven Scott" width="140" height="140">
                        <h2><strong>Steven Scott</strong></h2>
                        <p>Trade experience:
                            <br>20+ Years - Fitting & Machining.</p>
                        <br>
                        <p>
                            <a class="btn btn-default" href="#" role="button">Background »</a>
                        </p>
                    </div>

                    <div class="steve1">
                        <img class="img-circle" src="images/profile1.png" alt="Steven Muscat" width="140" height="140">
                        <h2><strong>Steven Muscat</strong></h2>
                        <p>Trade experience:
                            <br>20+ Years - Fitting & Machining.</p>
                        <br>
                        <p>
                            <a class="btn btn-default" href="#" role="button">Background »</a>
                        </p>
                    </div>

                    <div class="quentin">
                        <img class="img-circle" src="images/profile3.jpg" alt="Quentin Bailey" width="140" height="140">
                        <h2><strong>Quentin Bailey</strong></h2>
                        <p>Trade experience:
                            <br>4<sup>th</sup> Year Apprentice - Fitting & Machining.</p>
                        <br>
                        <p>
                            <a class="btn btn-default" href="#" role="button">Background »</a>

                        </p>

                    </div>
                </div>
            </div>

If I change the width to 100%, it shows vertically:

Container:

As this is a bootstrap, most of the responsiveness is already working, and everything is using media queries.

Answer 1

EDIT

All you have to do is set the width of your child containers to width: 33.33%. and set the width of your .row-circles to max-width so that it decreases depending on the view port, but always stays within 1263px if viewport size if more than that.

One thing i forgot to say is to never write repetitive code if different elements (classes IDs etc) use the same attributes then put them under the same class, or group the together like i did below.

.row-circles {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    font-size: 18px;
    height: 450px;
    line-height: 40px;
    position: relative;
    max-width: 1263px; /* new */
    margin: 0 auto;

}


.steve1, .steve2, .quentin {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    float: left;
    font-size: 100%;
    height: 406px;
    line-height: 40px;
    margin-bottom: 20px;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: center;
    width: 33.3%; /* new */

}

.steve1 h2, .steve2 h2, .quentin h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}


.quentin p, .steve p, .quentin p {
    margin-top: -20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/*NEW*/
img.img-circle {
    min-width: 50px;/*NEW*/
    max-width: 140px;/*NEW*/
    width: 100%;/*NEW*/
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: 50%;
    border: 0;
    border-bottom-color: rgb(90, 90, 90);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(90, 90, 90);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(90, 90, 90);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(90, 90, 90);
    border-top-style: none;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: inline;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}
/* Deleted
img .img-circle {
  ..... /*Deleted/*
  }
*/

.circles h2 {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    font-size: 30px;
    font-weight: normal;
    height: 33px;
    line-height: 33px;
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: center;
    width: 456px;
}
.circles p {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    font-size: 14px;
    height: 80px;
    line-height: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    text-align: center;
    width: 436px;
}
a.btn.btn-default {
    -webkit-user-select: none;
    background-color: #83d3c9;
    background-image: none;
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(204, 204, 204);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(204, 204, 204);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgb(204, 204, 204);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 200;
    height: 34px;
    line-height: 20px;
    margin-bottom: 0px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    width: 111.031px;
}

<div class="width-container">

                <div class="row-circles">
                    <div class="steve2">
                        <img class="img-circle" src="images/profile2.jpg" alt="Steven Scott" width="140" height="140">
                        <h2><strong>Steven Scott</strong></h2>
                        <p>Trade experience:
                            <br>20+ Years - Fitting & Machining.</p>
                        <br>
                        <p>
                            <a class="btn btn-default" href="#" role="button">Background »</a>
                        </p>
                    </div>

                    <div class="steve1">
                        <img class="img-circle" src="images/profile1.png" alt="Steven Muscat" width="140" height="140">
                        <h2><strong>Steven Muscat</strong></h2>
                        <p>Trade experience:
                            <br>20+ Years - Fitting & Machining.</p>
                        <br>
                        <p>
                            <a class="btn btn-default" href="#" role="button">Background »</a>
                        </p>
                    </div>

                    <div class="quentin">
                        <img class="img-circle" src="images/profile3.jpg" alt="Quentin Bailey" width="140" height="140">
                        <h2><strong>Quentin Bailey</strong></h2>
                        <p>Trade experience:
                            <br>4<sup>th</sup> Year Apprentice - Fitting & Machining.</p>
                        <br>
                        <p>
                            <a class="btn btn-default" href="#" role="button">Background »</a>

                        </p>

                    </div>
                </div>
            </div>

Answer 2

If your goal is (as you commented above) to keep steve, steve, and quentin always side-by-side, no matter the size of the screen, here's the css: (I've combined rules for steve1, steve2, and quentin as they were identical)

view codepen: http://codepen.io/anon/pen/jWMeKg

.row-circles {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    font-size: 18px;
    height: 450px;
    line-height: 40px;
    position: relative;
    width:100%; 
    max-width:1263px; 
    margin: 0 auto;

}
.steve1, .steve2, .quentin {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    float: left;
    font-size: 18px;
    height: 406px;
    line-height: 40px;
    margin-bottom: 20px;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: center;
    width: 33%;
}
.quentin h2, .steve1 h2, .steve2 h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.quentin p, .steve1 p, .steve2 p {
    margin-top: -20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

If you need to change certain aspects of this styling for different screens (for instance, you'll likely need to edit the height of the sections on smaller screens, font-size, etc.), then you can wrap those differences in @media rules. - personally, I would start with how you want things to appear on the smallest screens, and then use min-width rules to change things as necessary as screen size increases. for example:

/* rules that apply to everything */
.steve1, .steve2, .quentin {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    float: left;
    font-size: 12px; 
    height: auto;
    line-height: 40px;
    margin-bottom: 20px;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: center;
    width: 33%;
 }

/* example rule that changes based on screen size */
@media screen and (min-width: 960px) {
.steve1, .steve2, .quentin {
    font-size:18px;
    height:406px;
  }
}