Responsive Web Design

Posted by Derek Banas on May 17, 2015 in Uncategorized | 0 comments

Responsive web design is used to make sure a site is optimized for any device. In this tutorial I’ll create 3 optimized sites in one video and walk you through my process the whole way through.

If you have any questions about HTML5 or CSS3 I cover them in these 2 tutorials HTML5 Tutorial and CSS3 Tutorial. All of the code from the video can be found below.

If you like videos like this, it helps to tell Google with a click here

Code From the Video

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style_large.css">
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and
  (max-width:980px)" href="css/style_768.css">
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:600px) and
  (max-width:767px)" href="css/style_600.css">
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:300px) and
  (max-width:599px)" href="css/style_300.css">
</head>
<body>
  <div class="wrapper">

    <aside>
      <img src="images/logo.png" id="logo" alt="new think tank logo">
      <ul class="sb-icon-list">
        <li class="sb-item first-sb">
          <span class="list-span">About</span>
        </li>
        <li class="sb-item second-sb">
          <span class="list-span">Contact Us</span>
        </li>
        <li class="sb-item third-sb">
          <span class="list-span">Blog</span>
        </li>
        <li class="sb-item fourth-sb">
          <span class="list-span">Videos</span>
        </li>
        <li class="sb-item fifth-sb">
          <span class="list-span">Podcast</span>
        </li>
      </ul>

      <div id="social">
        <span id="social-title">LET'S TALK</span>
        <img class="social-icons" src="images/facebook-ic.png">
        <img class="social-icons" src="images/twitter-ic.png">
        <img class="social-icons" src="images/rss-ic.png">
      </div>
    </aside>

    <main>
      <img src="images/eyes.png" id="big-image">
      <div id="newsletter">
        <span id="signup-txt">Sign up for our free newsletter to stay up to date on
          my newest tutorials, podcasts and giveaways</span>
          <span class="subscribe-span">
            <input type="text" name="email" class="email-input">
            <span class="button">Subscribe</span>
          </span>
        </div>

        <div class="article-block">

        <div class="article first-art">

            <img src="images/first-tn.png">

            <div class="art-title">Slow and Steady Win the Race</div>
            <div class="art-excerpt">
              Here is a random picture
              of something and isn’t
              wonderful. I’ll talk about
              it in this article which
              I’m sure you will enjoy.
              Just click the picture to
              read more.
            </div>

          </div>

          <div class="article second-art">

            <img src="images/second-tn.png">

            <div class="art-title">Take Time to Enjoy the Little Things</div>
            <div class="art-excerpt">
              Here is a random picture
              of something and isn’t
              wonderful. I’ll talk about
              it in this article which
              I’m sure you will enjoy.
              Just click the picture to
              read more.
            </div>

          </div>

          <div class="article third-art">

            <img src="images/third-tn.png">

            <div class="art-title">Always Keep Your Eyes on the Prize</div>
            <div class="art-excerpt">
              Here is a random picture
              of something and isn’t
              wonderful. I’ll talk about
              it in this article which
              I’m sure you will enjoy.
              Just click the picture to
              read more.
            </div>

          </div>

          <div class="article fourth-art">

            <img src="images/fourth-tn.png">

            <div class="art-title">The Benefits of Being Cute</div>
            <div class="art-excerpt">
              Here is a random picture
              of something and isn’t
              wonderful. I’ll talk about
              it in this article which
              I’m sure you will enjoy.
              Just click the picture to
              read more.
            </div>

          </div>

        </div>

      </main>

    </div> <!-- End of Wrapper -->
  </body>
  </html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<!DOCTYPE html>

<head>

(max-width:980px)" href="css/style_768.css">

(max-width:767px)" href="css/style_600.css">

(max-width:599px)" href="css/style_300.css">

</head>

<body>

<aside>

<span class="list-span">About</span>

</li>

<span class="list-span">Contact Us</span>

</li>

</li>

<span class="list-span">Videos</span>

</li>

<span class="list-span">Podcast</span>

</li>

</ul>

</div>

</aside>

<main>

<span id="signup-txt">Sign up for our free newsletter to stay up to date on

my newest tutorials, podcasts and giveaways</span>

<span class="button">Subscribe</span>

</span>

</div>

<div class="art-title">Slow and Steady Win the Race</div>

Here is a random picture

of something and isn’t

wonderful. I’ll talk about

it in this article which

I’m sure you will enjoy.

Just click the picture to

</div>

<div class="art-title">Take Time to Enjoy the Little Things</div>

Here is a random picture

of something and isn’t

wonderful. I’ll talk about

it in this article which

I’m sure you will enjoy.

Just click the picture to

</div>

<div class="art-title">Always Keep Your Eyes on the Prize</div>

Here is a random picture

of something and isn’t

wonderful. I’ll talk about

it in this article which

I’m sure you will enjoy.

Just click the picture to

</div>

<div class="art-title">The Benefits of Being Cute</div>

Here is a random picture

of something and isn’t

wonderful. I’ll talk about

it in this article which

I’m sure you will enjoy.

Just click the picture to

</div>

</main>

</div>

</body>

</html>

style_large.css

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 62.5%;
  font-family: arial, sans-serif;
  color: #221F51;
}

.wrapper {
  font-size: 1.6em;
  padding: 2em;
  margin: 0 auto;
  width: 990px;
  background-color: white;
}

#logo {
  margin-bottom: 15px;
}

.sb-item {
  height: 34px;
  list-style-type: none;
  margin-bottom: 21px;
}

.sb-icon-list {
  margin-bottom: 60px;
}

/* Icons for sidebar list */
.first-sb {
  background: url('../images/first-sb.png') bottom left no-repeat;
}
.second-sb {
  background: url('../images/second-sb.png') bottom left no-repeat;
}
.third-sb {
  background: url('../images/third-sb.png') bottom left no-repeat;
}
.fourth-sb {
  background: url('../images/fourth-sb.png') bottom left no-repeat;
}
.fifth-sb {
  background: url('../images/fifth-sb.png') bottom left no-repeat;
}

.list-span{
  display: inline-block;
  padding-left: 45px;
  padding-top: 8px;
  font-size: 1.4em;
}

#social-title {
  display: block;
  border-bottom: 1px dashed #221F51;
  width: 143px;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.social-icons {
  padding-right: 7px;
}

aside {
  float:left;
  margin-right: 35px;
}

main {
  float: right;
}

#big-image {
  margin-bottom: 50px;
}

#newsletter {
  background: url('../images/newsletter-ic.png') bottom left no-repeat;
  height: 34px;
  padding-left: 54px;
  position: relative; /* So I can position subscribe-span */
  margin-bottom: 50px;
}

#signup-txt {
  width: 317px;
  display: inline-block;
  font-size: .9em;
  margin-right: 60px;
  padding-top: 5px;
}

.email-input {
  height: 30px;
  width: 170px;
  margin-right: 30px;
}

.button {
  border:1px solid #999999;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  border-radius: 42px;
  font-size:12px;
  padding: 5px 15px 5px 15px;
  text-decoration:none;
  display:inline-block;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  font-weight:bold;
  color: #000000;
  background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);
}

.subscribe-span{
  position: absolute;
  bottom: 10;
  margin-top: 8px;
}

.article {
  display: inline-block;
  width: 166px;
  margin-right: 16px;
}

.art-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

.fourth-art {
  margin-right: 0px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

* {

padding: 0;

margin: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-size: 62.5%;

font-family: arial, sans-serif;

color: #221F51;

}

.wrapper {

font-size: 1.6em;

padding: 2em;

margin: 0 auto;

width: 990px;

background-color: white;

}

#logo {

margin-bottom: 15px;

}

.sb-item {

height: 34px;

list-style-type: none;

margin-bottom: 21px;

}

.sb-icon-list {

margin-bottom: 60px;

}

/* Icons for sidebar list */

.first-sb {

background: url('../images/first-sb.png') bottom left no-repeat;

}

.second-sb {

background: url('../images/second-sb.png') bottom left no-repeat;

}

.third-sb {

background: url('../images/third-sb.png') bottom left no-repeat;

}

.fourth-sb {

background: url('../images/fourth-sb.png') bottom left no-repeat;

}

.fifth-sb {

background: url('../images/fifth-sb.png') bottom left no-repeat;

}

.list-span{

display: inline-block;

padding-left: 45px;

padding-top: 8px;

font-size: 1.4em;

}

#social-title {

display: block;

border-bottom: 1px dashed #221F51;

width: 143px;

padding-bottom: 5px;

margin-bottom: 10px;

}

.social-icons {

padding-right: 7px;

}

aside {

float:left;

margin-right: 35px;

}

main {

float: right;

}

#big-image {

margin-bottom: 50px;

}

#newsletter {

background: url('../images/newsletter-ic.png') bottom left no-repeat;

height: 34px;

padding-left: 54px;

position: relative; /* So I can position subscribe-span */

margin-bottom: 50px;

}

#signup-txt {

width: 317px;

display: inline-block;

font-size: .9em;

margin-right: 60px;

padding-top: 5px;

}

.email-input {

height: 30px;

width: 170px;

margin-right: 30px;

}

.button {

border:1px solid #999999;

-webkit-border-radius: 42px;

-moz-border-radius: 42px;

border-radius: 42px;

font-size:12px;

padding: 5px 15px 5px 15px;

text-decoration:none;

display:inline-block;

text-shadow: 1px 1px 0 rgba(255,255,255,0.3);

font-weight:bold;

color: #000000;

background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));

background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);

}

.subscribe-span{

position: absolute;

bottom: 10;

margin-top: 8px;

}

.article {

display: inline-block;

width: 166px;

margin-right: 16px;

}

.art-title {

margin-top: 10px;

margin-bottom: 10px;

}

.fourth-art {

margin-right: 0px;

}

style_768.css

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 62.5%;
  font-family: arial, sans-serif;
  color: #221F51;
}

.wrapper {
  font-size: 1.6em;
  padding: 2em;
  margin: 0 auto;
  width: 768px;
  background-color: white;
}

#logo {
  /* margin-bottom: 15px; NEW */
  display: inline-block; /* NEW */
}

.sb-item {
  height: 62px; /* NEW */
  width: 48px; /* NEW */
  list-style-type: none;
  margin-bottom: 0px;
  padding-top: 50px; /* NEW */
  display: inline; /* NEW */
  margin-left: 35px; /* NEW */
}

.sb-icon-list {
  margin-bottom: 50px; /* NEW */
  width: 540px; /* NEW */
  display: inline-block;
}

/* Icons for sidebar list NEW */
.first-sb {
  background: url('../images/first-sb.png') top center no-repeat;
}
.second-sb {
  background: url('../images/second-sb.png') top center no-repeat;
}
.third-sb {
  background: url('../images/third-sb.png') top center no-repeat;
}
.fourth-sb {
  background: url('../images/fourth-sb.png') top center no-repeat;
}
.fifth-sb {
  background: url('../images/fifth-sb.png') top center no-repeat;
}

.list-span{
  display: inline-block;
  padding-left: 0px; /* NEW */
  padding-top: 8px;
  font-size: 1.4em;
}

/* NEW Eliminates the social part all together */
#social {
  display: none;
}

/* NEW
aside {
  float:left;
  margin-right: 35px;
}
*/

main {
  /* float: right; NEW */
}

#big-image {
  margin-bottom: 50px;
}

#newsletter {
  background: url('../images/newsletter-ic.png') bottom left no-repeat;
  height: 34px;
  padding-left: 54px;
  position: relative; /* So I can position subscribe-span */
  margin-bottom: 50px;
}

#signup-txt {
  width: 317px;
  display: inline-block;
  font-size: .9em;
  margin-right: 60px;
  padding-top: 5px;
}

.email-input {
  height: 30px;
  width: 170px;
  margin-right: 30px;
}

.button {
  border:1px solid #999999;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  border-radius: 42px;
  font-size:12px;
  padding: 5px 15px 5px 15px;
  text-decoration:none;
  display:inline-block;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  font-weight:bold;
  color: #000000;
  background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);
}

.subscribe-span{
  position: absolute;
  bottom: 10;
  margin-top: 8px;
}

.article {
  display: inline-block;
  width: 166px;
  margin-right: 16px;
}

.art-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

.fourth-art {
  margin-right: 0px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

* {

padding: 0;

margin: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-size: 62.5%;

font-family: arial, sans-serif;

color: #221F51;

}

.wrapper {

font-size: 1.6em;

padding: 2em;

margin: 0 auto;

width: 768px;

background-color: white;

}

#logo {

/* margin-bottom: 15px; NEW */

display: inline-block; /* NEW */

}

.sb-item {

height: 62px; /* NEW */

width: 48px; /* NEW */

list-style-type: none;

margin-bottom: 0px;

padding-top: 50px; /* NEW */

display: inline; /* NEW */

margin-left: 35px; /* NEW */

}

.sb-icon-list {

margin-bottom: 50px; /* NEW */

width: 540px; /* NEW */

display: inline-block;

}

/* Icons for sidebar list NEW */

.first-sb {

background: url('../images/first-sb.png') top center no-repeat;

}

.second-sb {

background: url('../images/second-sb.png') top center no-repeat;

}

.third-sb {

background: url('../images/third-sb.png') top center no-repeat;

}

.fourth-sb {

background: url('../images/fourth-sb.png') top center no-repeat;

}

.fifth-sb {

background: url('../images/fifth-sb.png') top center no-repeat;

}

.list-span{

display: inline-block;

padding-left: 0px; /* NEW */

padding-top: 8px;

font-size: 1.4em;

}

/* NEW Eliminates the social part all together */

#social {

display: none;

}

/* NEW

aside {

float:left;

margin-right: 35px;

}

main {

/* float: right; NEW */

}

#big-image {

margin-bottom: 50px;

}

#newsletter {

background: url('../images/newsletter-ic.png') bottom left no-repeat;

height: 34px;

padding-left: 54px;

position: relative; /* So I can position subscribe-span */

margin-bottom: 50px;

}

#signup-txt {

width: 317px;

display: inline-block;

font-size: .9em;

margin-right: 60px;

padding-top: 5px;

}

.email-input {

height: 30px;

width: 170px;

margin-right: 30px;

}

.button {

border:1px solid #999999;

-webkit-border-radius: 42px;

-moz-border-radius: 42px;

border-radius: 42px;

font-size:12px;

padding: 5px 15px 5px 15px;

text-decoration:none;

display:inline-block;

text-shadow: 1px 1px 0 rgba(255,255,255,0.3);

font-weight:bold;

color: #000000;

background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));

background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);

}

.subscribe-span{

position: absolute;

bottom: 10;

margin-top: 8px;

}

.article {

display: inline-block;

width: 166px;

margin-right: 16px;

}

.art-title {

margin-top: 10px;

margin-bottom: 10px;

}

.fourth-art {

margin-right: 0px;

}

style_600.css

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 62.5%;
  font-family: arial, sans-serif;
  color: #221F51;
}

.wrapper {
  font-size: 1.6em;
  padding: 1.8em;
  margin: 0 auto;
  width: 600px; /* NEW */
  background-color: white;
}

/* NEW */
#logo {
  display: inline-block;
  height: 96px;
  width: 84px;
  margin-left: -15px;
}

.sb-item {
  /*
  height: 62px;
  width: 48px;
  padding-top: 50px;
   */
   margin-bottom: 0px;
   /* NEW */
  display: inline;
  list-style-type: none;
  margin-left: 14px;
  background: none;
}

.sb-icon-list {
  margin-bottom: 50px;
  width: 430px;
  display: inline-block;
  font-size: .9em;
}

/*
.first-sb {
  background: url('../images/first-sb.png') top center no-repeat;
}
.second-sb {
  background: url('../images/second-sb.png') top center no-repeat;
}
.third-sb {
  background: url('../images/third-sb.png') top center no-repeat;
}
.fourth-sb {
  background: url('../images/fourth-sb.png') top center no-repeat;
}
.fifth-sb {
  background: url('../images/fifth-sb.png') top center no-repeat;
}
*/

.list-span{
  display: inline-block;
  padding-left: 0px;
  padding-top: 8px;
  font-size: 1.4em;
}

/* Eliminates the social part all together */
#social {
  display: none;
}

#big-image {
  margin-bottom: 50px;
  width: 570px;
  height: 355px;
}

#newsletter {
  background: url('../images/newsletter-ic.png') bottom left no-repeat;
  height: 34px;
  padding-left: 54px;
  position: relative; /* So I can position subscribe-span */
  margin-bottom: 50px;
}

#signup-txt {
  width: 246px;
  display: inline-block;
  font-size: .7em;
  margin-right: 15px;
  padding-top: 5px;
}

.email-input {
  height: 25px;
  width: 150px;
  margin-right: 15px;
}

.button {
  border:1px solid #999999;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  border-radius: 42px;
  font-size:12px;
  padding: 5px 10px 5px 10px;
  text-decoration:none;
  display:inline-block;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  font-weight:bold;
  color: #000000;
  background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);
}

.subscribe-span{
  position: absolute;
  bottom: 10;
  margin-top: 8px;
}

.article {
  display: inline-block;
  width: 166px;
  margin-right: 29px;
}

.art-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

.third-art {
  margin-right: 0px;
}

.fourth-art {
  margin-right: 0px;
}

/* NEW */
.fourth-art {
  display: none;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

* {

padding: 0;

margin: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-size: 62.5%;

font-family: arial, sans-serif;

color: #221F51;

}

.wrapper {

font-size: 1.6em;

padding: 1.8em;

margin: 0 auto;

width: 600px; /* NEW */

background-color: white;

}

/* NEW */

#logo {

display: inline-block;

height: 96px;

width: 84px;

margin-left: -15px;

}

.sb-item {

height: 62px;

width: 48px;

padding-top: 50px;

margin-bottom: 0px;

/* NEW */

display: inline;

list-style-type: none;

margin-left: 14px;

background: none;

}

.sb-icon-list {

margin-bottom: 50px;

width: 430px;

display: inline-block;

font-size: .9em;

}

.first-sb {

background: url('../images/first-sb.png') top center no-repeat;

}

.second-sb {

background: url('../images/second-sb.png') top center no-repeat;

}

.third-sb {

background: url('../images/third-sb.png') top center no-repeat;

}

.fourth-sb {

background: url('../images/fourth-sb.png') top center no-repeat;

}

.fifth-sb {

background: url('../images/fifth-sb.png') top center no-repeat;

}

.list-span{

display: inline-block;

padding-left: 0px;

padding-top: 8px;

font-size: 1.4em;

}

/* Eliminates the social part all together */

#social {

display: none;

}

#big-image {

margin-bottom: 50px;

width: 570px;

height: 355px;

}

#newsletter {

background: url('../images/newsletter-ic.png') bottom left no-repeat;

height: 34px;

padding-left: 54px;

position: relative; /* So I can position subscribe-span */

margin-bottom: 50px;

}

#signup-txt {

width: 246px;

display: inline-block;

font-size: .7em;

margin-right: 15px;

padding-top: 5px;

}

.email-input {

height: 25px;

width: 150px;

margin-right: 15px;

}

.button {

border:1px solid #999999;

-webkit-border-radius: 42px;

-moz-border-radius: 42px;

border-radius: 42px;

font-size:12px;

padding: 5px 10px 5px 10px;

text-decoration:none;

display:inline-block;

text-shadow: 1px 1px 0 rgba(255,255,255,0.3);

font-weight:bold;

color: #000000;

background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));

background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);

}

.subscribe-span{

position: absolute;

bottom: 10;

margin-top: 8px;

}

.article {

display: inline-block;

width: 166px;

margin-right: 29px;

}

.art-title {

margin-top: 10px;

margin-bottom: 10px;

}

.third-art {

margin-right: 0px;

}

.fourth-art {

margin-right: 0px;

}

/* NEW */

.fourth-art {

display: none;

}

	Facebook
	YouTube
	Twitter
	LinkedIn

Responsive Web Design

Leave a Reply Cancel reply