0

Hey everyone,

So I have a website, already up and running but I'm having trouble making the site responsive to different screen widths. I'm having trouble making the text automatically fit to page when I try to manually resize the window in my desk top. I haven't completed the responsive design but I was wondering if I could get some help as to how to do this properly.

My goal is to have the main header image at the top of the page, scale down to fit the screen as well as have the navigation that is displayed to the right of the image to be displayed in the same header section but underneath the header image and still display inline. I would also like the content to show on top of each other instead of side by side. Could anyone help me with this?

Here are my files:

html

<!DOCTYPE html>
<!--[if IE 7 ]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content=""
    <meta name="robots" content="index, follow" />
    <title>Home</title>
    <link name="viewpoint" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
    <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($){
    $("#contactform").validate({
     rules: {
        name: {
           required: true,
           minlength: 2
        },
        email: {
           required: true,
           email: true
        },
        message: {
           required: true,
           minlength: 50
        }
     },
     messages: {
        name:  {
           required: "Please enter your name",
           minlength: "Your name seems to be a bit short doesn't it?"
        },
        email: {
           required: "Please enter your email address",
           email: "Please enter a valid email address"
        },
        message: {
           required: "Please enter your message",
           minlength: "Your message seems a bit short doesn't it? Please enter at least 50 characters"
        }
     }
      });
   });
    </script>
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script>
    <script src="js/jquery.smoothscroll.js"></script>
    <script src="js/jquery.nivo.slider.pack.js"></script>
    <script src="js/jquery.easing-1.3.pack.js"></script>
    <script src="js/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="js/init.js"></script>
    <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/>
</head>
<body>
<!-- header-wrap -->

<div id="header-wrap">
    <header>
        <hgroup>
            <h1><a href="index.php">Some Name</a></h1>
            <h3>Some Title</h3>
        </hgroup>
        <nav>
            <ul>
                <li><a href="#main">Home</a></li>
                <li><a href="#services">Services</a></li>
        <li><a href="#portfolio">My Work</a></li>
        <li><a href="#about-us">About Me</a></li>
                <li><a href="#contact">Contact Me</a></li>
            </ul>
        </nav>
    </header>
</div>

<!-- content-wrap -->
<div class="content-wrap">
    <!-- main -->
    <section id="main">
        <div class="intro-box">
           <h1>Welcome!</h1>
           <p class="intro">Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
           <p class="intro">Some more text goes here. Some more text goes here. Some more text goes here. Some more text goes here. Some more text goes here.</p>
        </div>
        <div class="slider-wrapper">
            <div id="slider" class="nivoSlider">
                <a class="lightbox" href="image/path" title=""><img src="img/path" width="383" height="190" alt="" title="" /></a>
                <a class="lightbox" href="image/path" target="_blank" title="" ><img src="img/path" width="383" height="190" alt="" title="" /></a>
                <a class="lightbox" href="image/path" title="" ><img src="img/path" width="383" height="190" alt="" title="" /></a>
            </div>
        </div>
        <div class="row no-bottom-margin">
            <section class="col">
                <h2>Title</h2>
                <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here. </p>
            </section>
            <section class="col mid">
                <h2>Title</h2>
                <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
            </section>
            <section class="col">
                <h2>title</h2>
                <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
            </section>
        </div>
        <a class="back-to-top" href="#main">Back to Top</a>
      </section>
      <!-- services -->
      <section id="services" >
             <h1>Another Title.</h1>
             <div class="row no-bottom-margin">
                <section class="col">
                    <h2>Title</h2>
                    <p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
                </section>
                <section class="col mid">
                    <h2>Title</h2>
                    <p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
                </section>
                <section class="col">
                    <h2>Title</h2>
                    <p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
                </section>
            </div>
            <div class="row">
                <section class="col">
                    <h2>Title</h2>
                    <p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
                </section>
                <section class="col mid">
                    <h2>Title</h2>
                    <p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
                </section>
                <section class="col">
                    <h2>Title</h2>
                    <p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
                </section>
            </div>
            <a class="back-to-top" href="#main">Back to Top</a>
      </section>
      <!-- portfolio -->
      <section id="portfolio">
            <h1>Title</h1>
            <ul class="folio-list clearfix">
                <li class="folio-thumb">
                    <div class="thumb">
                        <a class="lightbox" href="images/path" target="_blank" title="" ><img src="images/path" alt="" /> </a>
                    </div>
                    <h3 class="entry-title">Some Title</h3>
                </li>
                <li class="folio-thumb last">
                    <div class="thumb">
                        <a href="" target="_blank" title=""><img src="images/path" alt="" /> </a>
                    </div>
                    <h3 class="entry-title">Some Title.</h3>
                </li>
                <li class="folio-thumb">
                    <div class="thumb">
                        <a class="lightbox" href="images/path" title="" ><img src="images/path" alt="" /></a>
                    </div>
                    <h3 class="entry-title">Some Title</h3>
                </li>
        <!--
                <li class="folio-thumb">
                    <div class="thumb">
                        <a href="#" title="" ><img src="images/path" alt="" /> </a>
                    </div>
                    <h3 class="entry-title">Some Title</h3>
                </li>
        -->
                <li class="folio-thumb">
                    <div class="thumb">
                        <a class="lightbox" href="images/path" title=""><img src="images/path" alt="" /> </a>
                    </div>
                    <h3 class="entry-title">Some Title</h3>
                </li>
                 <!--
         <li class="folio-thumb last">
                    <div class="thumb">
                        <a class="lightbox" href="images/path" title=""><img src="images/path" alt="" /> </a>
                    </div>
                    <h3 class="entry-title">Some Title</h3>
                </li>
                <li class="folio-thumb">
                    <div class="thumb">
                        <a class="lightbox" href="images/path" title=""><img src="images/path" alt=""  /> </a>
                    </div>
                    <h3 class="entry-title">Some Title</h3>
                </li>
                <li class="folio-thumb">
                    <div class="thumb">
                        <a class="lightbox" href="images/path" title=""><img src="images/path" alt="" /> </a>
                    </div>
                    <h3 class="entry-title">Some Title</h3>
                </li>
                 <li class="folio-thumb last">
                    <div class="thumb">
                        <a class="lightbox" href="images/path" title="path"><img src="images/path" alt="" /> </a>
                    </div>
                    <h3 class="entry-title">Some Title</h3>
                </li>
        -->
            </ul>
            <a class="back-to-top" href="#main">Back to Top</a>
      </section>
      <!-- about me -->
      <section id="about-us" class="clearfix">
            <h1>Some Title</h1>
            <div class="primary">
                <img style="margin-right: 8px; border: 1px solid #000;" align="left" width="213px" height="213px" src="images/path"/><p style="margin-top: -5px;" class="intro">Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                </p>
        <h2>Another Title...</h2>
        <h3>Another Tile Goes Here</h3>
        <br />
                        <p>Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
        <h3>Another Title Goes Here</h3>
        <br />
            <p>Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
        <h3>Another Title Goes Here</h3>
        <br />
            <p>Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
                <h3>Another Title Goes Here</h3>
        <br />
            <p>Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
        <h3>Another Title Goes Here</h3>
        <br />
            <p>Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
        <h3>Another Title Goes Here</h3>
        <br />
            <p>Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
        <div class="row no-bottom-margin">
                </div>
            </div>
            <aside>
                    <h2>More Titles</h2>
                    <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
                    <h2>Titles</h2>
                    <div class="testimonials">
                        <blockquote>
                            <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
                            Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
                            <cite>Some Person, <a href="" target="_blank">Some Title</a></cite>
                        </blockquote>
                        <!--<blockquote>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Cras mattis
                            consectetur purus sit amet fermentum.</p>
                            <cite>&mdash; Jane Roe, ABC Corp</cite>
            </blockquote>-->
                    </div>
            </aside>
            <a class="back-to-top" href="#main">Back to Top</a>
      </section>
      </section>
      <!-- contact -->
      <section id="contact" class="clearfix">
            <h1>Title Here</h1>
            <div class="primary">
                <p class="intro">
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                </p>
                <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform" novalidate>
                    <div>
            <p><span class="required">*</span> Please fill all the required fields</p>
            <?php
               if($sent === true){
                  echo "<h2 class='success'>Thanks! Your message has been sent successfully!</h2>";
               }elseif($hasError === true){
                  echo '<ul class="errorlist">';
                  foreach($errorArray as $key => $val){
                 echo "<li>" . ucfirst($key) . " field error - $val</li>";
                  }
                  echo '</ul>';
               }
            ?>
                    </div>
                    <div>
            <label>Name <span class="required">*</span></label>
            <input name="name" type="text" id="name" value="<?php echo (isset($name) ? $name : ""); ?>" />
                    </div>
                    <div>
            <label>Email <span class="required">*</span></label>
            <input name="email" type="text" id="email" value="<?php echo (isset($email) ? $email : ""); ?>" />
                    </div>
                    <div>
            <label>Message <span class="required">*</span></label>
            <textarea name="message" rows="20" cols="50"  id="message" ><?php echo (isset($message) ? $message : ""); ?></textarea><br /><br />
                    </div>
                    <div>
            <input type="submit"  value="Submit" class="button">
            <input type="reset" value="Reset" class="button">
            </div>
                </form>
            </div>
            <aside>
                    <h2>More Titles</h2>
                    <p style="font-size:15px;">
            Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
                Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
            </p>
                    <p style="font-size:15px;">Some text goes here<br />
                    Some text goes here..
                    </p>
                    <h2>Some text</h2>
                    <ul class="link-list social">
                        <li class="facebook" style="font-size:15px;"><a href="" target="_blank">Some text</a></li>
                        <li class="googleplus" style="font-size:15px;"><a href="" target="_blank">Some text</a></li>
                        <li class="twitter" style="font-size:15px;"><a href="Some text" target="_blank">Some text</a></li>
                        <li class="linkedin" style="font-size:15px;"><a href="" target="_blank">Some text</a></li>
                    </ul>
            </aside>
            <a class="back-to-top" href="#main">Back to Top</a>
     </section>
</div>
<!-- footer -->
<footer>
    <div class="footer-content">
        <ul class="footer-menu">
            <li><a href="#main">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#about-us">About Me</a></li>
            <li><a href="#contact">Contact Me</a></li>
        </ul>
        <p class="footer-text">Footer content</p>
    </div>
</footer>
</body>
</html>

css

 /* ------------------------------------------------
    CUSTOM WEB FONTS
--------------------------------------------------*/
@font-face {
    font-family: 'MerriweatherRegular';
    src: url('fonts/merriweather-regular-webfont.eot');
    src: url('fonts/merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/merriweather-regular-webfont.woff') format('woff'),
         url('fonts/merriweather-regular-webfont.ttf') format('truetype'),
         url('fonts/merriweather-regular-webfont.svg#MerriweatherRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MerriweatherBold';
    src: url('fonts/merriweather-bold-webfont.eot');
    src: url('fonts/merriweather-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/merriweather-bold-webfont.woff') format('woff'),
         url('fonts/merriweather-bold-webfont.ttf') format('truetype'),
         url('fonts/merriweather-bold-webfont.svg#MerriweatherBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* --------------------------------------
    RESET
----------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* -------------------------------------------------------
    GENERAL
---------------------------------------------------------- */
html { overflow-y: scroll; }
body {
    font-family: Georgia, Serif;
    font-size: 16px;
    line-height: 25px;
    color: #3B3B3B;
    background: /* url(../images/25-pixel-baseline.png) left top repeat, */ url(../images/bg.png) left top repeat ;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}

p { margin-bottom: 25px; }
p.intro { font-size: 18px; }

/* links */
a:link, a:visited {
    color: #285935;
    text-decoration: none;
    outline: 0;
}
a:hover, a:focus, a:active {
    color: #5E1F00;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    font-family: 'MerriweatherBold', Serif;
}
h1 {
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -0.9px;
    color: #046416;
    margin-left: -2px;
}
h2 {
    font-size: 22px;
    line-height: 25px;
    margin-top: 10px;
    margin-bottom: 15px;
}
h3 {
    font-size: 18px;
    line-height: 25px;
}

/* Lists */
ul, ol {
    margin-bottom: 25px;
    padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }

dl { margin-bottom: 25px; }
dt {
    font-weight: bold;
    color: #046416;
}
dd {
    padding-left: 20px;
}

blockquote {
    margin: 25px 0;
    padding-left: 40px;
    padding-right: 30px;
    background: url(../images/quote.png) no-repeat 3px 0;
    font-weight: normal;
    font-size: 18px;
    font-style: italic;
}
input, select {
    vertical-align: middle;
}

strong, b {
    font-weight: bold; 
}
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
mark {
    background-color: #FDD2B3;
}

/* Clearing and Alignment Classes */
.align-left {
    float: left;
}
.align-right {
    float: right;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.ie7 .clearfix { zoom: 1; } /* IE7 */

/* ------------------------------------------------------
    STRUCTURE
--------------------------------------------------------- */
#header-wrap {
    background: url(../images/header-bg.png);
    width: 100%;
    height: 70px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
}
header {
    position: relative;
    width: 940px;
    height: 70px;
    margin: 0 auto;
}
.content-wrap {
    width: 940px;
    margin: 0 auto;
}
.content-wrap section {
    position: relative;
    padding: 125px 0 25px 0;
    background: url(../images/section-sep.png) repeat-x left 25px;
}
.content-wrap section section {
    background: none;
    margin: 0;
}
.content-wrap section .row {
    clear: both;
    overflow: hidden;
    margin-bottom: 25px;
}
.content-wrap section .row .col {
    float: left;
    margin: 0;
    padding: 0;
    width: 290px;
    text-align: justify;
}
.content-wrap section .row .mid  {
    margin-left: 35px;
    margin-right: 35px;
}
.content-wrap section .no-bottom-margin{
    margin-bottom: 0;
}
.content-wrap section .primary {
    float: left;
    width: 620px;
}
.content-wrap section .primary p.intro {
    /* margin: 15px 0 10px 0; */
    margin: 15px 0 25px 0;
}
.content-wrap section aside {
    float: right;
    width: 285px;
}
.content-wrap section aside h2 {
    margin: 12.5px 0 12.5px 0;
}

.content-wrap section aside ul.link-list {
    font-size: 16px;
    margin: 0 0 25px 0;
    padding: 0;
    list-style: none;
    background: url(../images/section-sep.png) repeat-x left top;
}
.content-wrap section aside ul.link-list li {
    background: url(../images/section-sep.png) repeat-x left bottom;
    padding-left: 3px;
}
.content-wrap section aside ul.link-list li a {
    display: block;
    color: #3B3B3B;
    padding-top: 12.5px;
    padding-bottom: 12.5px;
}
.content-wrap section aside ul.link-list li a:hover,
.content-wrap section aside ul.link-list li a:focus,
.content-wrap section aside ul.link-list li a:active {
    color: #285935;
}
.content-wrap section aside .testimonials {
    margin: 0 0 25px 0;
}
.content-wrap section aside .testimonials blockquote {
    font-style: italic;
    font-size: 16px;
    padding-left: 27px;
    background: url(../images/quote-open.png) no-repeat left 5px;
    margin: 12.5px 0;
}
.content-wrap section aside .testimonials blockquote p {
    margin-bottom: 0;
}
.content-wrap section aside .testimonials blockquote cite {
    font-style: normal;
    text-transform: uppercase;
    font-size: 11px;
}

.content-wrap section .back-to-top {
    display: block;
    position: absolute;
    bottom: -65px;
    right: 10px;
    height: 43px;
    width: 43px;
    background: url(../images/back-to-top.png);
    text-indent: -9999px;
    z-index: 9999;
}
.ie7 .content-wrap section .back-to-top {
    bottom: -70px;
}

footer {
    position: relative;
    background: url(../images/section-sep.png) repeat-x left 25px;
    width: 940px;
    margin: 0 auto;
    padding-top: 125px;
}

/* -------------------------------------------
    Header
-------------------------------------------- */

/* Logo */
header hgroup {
    position: absolute;
    background: url(../images/logo1.png) no-repeat;
    height: 56px;
    width: 329px;
    display: block;
    top: 10px;
    left: 0;
}
header hgroup h1 a {
    text-indent: -9999em;
    display: block;
    height: 55px;
    width: 318px;
}
header hgroup h3  {
    text-indent: -9999em;
    height: 0;
}

/* Main Navigation */
header nav {
    float: right;
    margin-top: 25px;
}
header nav ul {
    font: bold 12px/25px  Helvetica, Arial, Sans-serif;
    margin-right: -5px;
    padding: 0;
    list-style: none;
}
header nav ul li {
    float: left;
}
header nav ul a:link, header nav ul a:visited {
    color: #c5c4c4;
    margin-right: 20px;
    text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);

}
header nav ul a:hover,
header nav ul a:active {
    color: #17a231;
}

/* -----------------------------------------
    Main Section
------------------------------------------ */
section#main {
    width: 940px;
    background: none;
}
section#main h1 {
    margin-top: 10px;
    margin-bottom: 15px;
}
section#main .intro-box {
    float:left;
    width:460px;
    min-height: 300px;
}
section#main .row .col h2 {
    margin-top: 15px;
    margin-bottom: 10px;
}

/* Slider */
.slider-wrapper {
    float: right;
    position: relative;
    background: url(../images/slider.png) no-repeat;
    margin-top: 30px;
    margin-bottom: 13px;
    width: 420px;
    height: 227px;
}
.slider-wrapper #slider {
    position: absolute;
    top: 18px;
    left: 18.5px;
    width: 383px; /* Make sure your images are the same size */
    height: 190px; /* Make sure your images are the same size *//
}
.slider-wrapper .nivoSlider {
    position: relative;
    background: #fff url(../images/loading.gif) no-repeat 50% 50%;
}
.slider-wrapper .nivoSlider img {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
.slider-wrapper .nivoSlider a {
    border: 0;
    display: block;
}
.slider-wrapper .nivo-controlNav {
    position: absolute;
    left: 50%;
    bottom: -45px;
    margin-left: -30px ; /* Tweak this to center bullets */
}
.slider-wrapper .nivo-controlNav a {
    display: block;
    width: 13px;
    height: 14px;
    background: url(../images/bullets.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    margin-right: 10px;
    float: left;
}
.slider-wrapper .nivo-controlNav a.active {
    background-position: 0 -14px;
}
.slider-wrapper .nivo-directionNav a {
    display: block;
    width: 33px;
    height: 52px;
    background: url(../images/arrows.png) no-repeat;
    text-indent: -9999px;
    border: 0;
}
.slider-wrapper a.nivo-nextNav {
    background-position: -33px 0;
    right: -50px;
    top: 70px;
}
.slider-wrapper a.nivo-prevNav {
    left: -48.5px;
    top: 70px;
}
.slider-wrapper .nivo-caption {
    /* font-family: Helvetica, Arial, sans-serif; */
    padding: 5px 10px;
    width: 363px;
    font-size: 12px;
    text-shadow: none;
    text-align: center;
}
.slider-wrapper .nivo-caption p {
    text-shadow: none;
    color: #CBCBCB;
}
.slider-wrapper .nivo-caption a {
    color: #66CC33;
    /* border-bottom: 1px dotted #fff; */
}
.slider-wrapper .nivo-caption a:hover {
    color:#fff;
}

/* -----------------------------------------
   Services
------------------------------------------- */
section#services h1 {
   margin: 0 0 25px 0;
}
section#services .row .col img.align-left {
    margin-top: 13px;
    margin-right: 12px;
}

/* ---------------------------------------
    Portfolio
----------------------------------------- */
section#portfolio ul.folio-list {
    margin: 25px 0;
    padding: 0;
    width: 970px;
    list-style: none;
}
section#portfolio ul.folio-list li {
    float: left;
    margin-right: 29px;
    margin-bottom: 10px;
    margin-top: 20px;
    width: 294px;
    height: 230px;
    max-height: 250px;
}
section#portfolio ul.folio-list li .thumb {
    margin: 0 0 5px 0;
    padding: 0;
    background: url(../images/thumb-frame.png) no-repeat;
    width: 294px;
    height: 157px;
}
section#portfolio ul.folio-list li .thumb img {
    margin-top: 15px;
    margin-left: 18px;
}
section#portfolio ul.folio-list li h3.entry-title {
    font-size: 14px;
    line-height: 25px;
    margin-left: 16px;
}

/* ------------------------------------------------
    About
------------------------------------------------ */
section#about-us .primary .row .first {
    margin-right: 35px;
}
section#about-us .primary ul.the-team {
    margin: 25px 0 25px 0;
    padding: 0;
    list-style: none;
}
section#about-us .primary ul.the-team li {
    float: left;
    width: 290px;
    height: 150px;
}
section#about-us .primary ul.the-team li a {
    color: #3B3B3B;
}
section#about-us .primary ul.the-team li a:hover,
section#about-us .primary ul.the-team li a:focus,
section#about-us .primary ul.the-team li a:active {
    color: #285935;
}

section#about-us .primary ul.the-team li .thumbnail {
    position: relative;
    float: left;
    background: url(../images/thumb-bg.png) no-repeat;
    width: 120px;
    height: 150px;
    margin-right: 12px;
}
section#about-us .primary ul.the-team li .thumbnail img {
    position: absolute;
    top: 19px;
    left: 18px;
}
section#about-us .primary ul.the-team li p {
    font-size: 14px;
    line-height: 20px;
    margin: 5px 0 0 0;
}
section#about-us .primary ul.the-team li p.mname {
    font-family: "MerriweatherBold", Serif;
    margin: 10px 0 0 0;
}
section#about-us .primary ul.the-team li.odd {
    margin-right: 35px;
}

section#about-us aside .download-btn {
    background: url(../images/btn-bg.png);
    display: block;
    width: 250px;
    height: 53px;
    border: 1px solid #066a19;
    margin: 0 0 20px 0;
    text-align: center;
    line-height: 55px;

    font-family: "MerriweatherBold", Georgia, Serif;
    font-size: 20px;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);

    box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
}

/* ---------------------------------------------------
    Contact
----------------------------------------------------- */

h2.success {
    color: #27ae60;
}
.errorlist{
    list-style: none;
}
label.error, .errorlist li{
    margin-bottom: 10px;
    color: #bb0000;
    display: block;
}
.errorlist li:last-child{
    margin-bottom: 20px;
}

section#contact .primary form {
    width: 500px;
    background: url(../images/form-bg.png);
    margin: 35px 0 25px 0;
    padding: 50px 40px 50px 40px;
}
section#contact .primary form p {
    font-family: "MerriweatherBold", Serif;
    font-size: 14.5px;
    color: #046416;
}
section#contact .primary form label {
    display: block;
    font-family: "MerriweatherBold", Serif;
    font-size: 14px;
    line-height: 25px;
    margin: 0 0 5px 0;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
section#contact .primary form label span {
    color: #046416;
}
section#contact .primary form input,
section#contact .primary form select,
section#contact .primary form textarea {
    margin-bottom: 20px;
    padding: 9px 10px;
    color: #6A6969;
    background: #cbcbcb;
    border-width: 1px;
    border-style: solid;
    border-color: #b8b8b8 #EBEBEB #EBEBEB #b8b8b8;
    font: 15px Helvetica, Arial, Sans-serif;

    -moz-box-shadow:inset 0 3px 1px rgba(0, 0, 0, .1);
    -webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .1);
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, .1);
}
section#contact .primary form textarea {
    height: 325px;
    margin-bottom: 0;
}
section#contact .primary form input:focus,
section#contact .primary form select:focus,
section#contact .primary form textarea:focus {
    background: #F0F0F0;
}
section#contact .primary form input.button {
    height: 38px;
    margin: 5px 0;
    background: #1F8532 url(../images/btn-bg.png);
    border: 1px solid #066a19;
    font-family: "MerriweatherBold", Georgia, Serif;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);

    box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
}
.ie7 section#contact .primary form input.button {
    padding: 0 2px;
}
#name, #email, #message, #subject, #website {
    width: 475px;
}

section#contact aside .social li a {
    padding-left: 35px;
}
section#contact aside .social li.facebook a {
    background: url(../images/social/facebook.png) no-repeat left 11px;
}
section#contact aside .social li.googleplus a {
    background: url(../images/social/googleplus.png) no-repeat left 11px;
}
section#contact aside .social li.twitter a {
    background: url(../images/social/twitter.png) no-repeat left 11px;
}
section#contact aside .social li.dribble a {
    background: url(../images/social/dribble.png) no-repeat left 11px;
}
section#contact aside .social li.linkedin a {
    background: url(../images/social/linkedin.png) no-repeat left 11px;
}
section#contact aside .social li.delicious a {
    background: url(../images/social/delicious.png) no-repeat left 11px;
}
section#contact aside .social li.flickr a {
    background: url(../images/social/flickr.png) no-repeat left 11px;
}

/* ----------------------------------------------------
    Footer
----------------------------------------------------- */
footer p.footer-text {
    font-family: "MerriweatherRegular", Serif;
    font-size: .75em;
    padding: 0 10px;
    margin-bottom: 0;
    clear: both;
}
footer .footer-content {
    position: relative;
    width: 900px;
    top: -105px;
}
footer ul.footer-menu {
    float: left;
    margin: 20px 0 5px -3px;
    padding: 0;
    list-style: none;
}
footer  ul.footer-menu li {
    float: left;
}
footer  ul.footer-menu li a {
    display: block;
    font-family: "MerriweatherBold", Serif;
    font-size: .75em;
    line-height: 1em;
    color: #3B3B3B;
    padding: 1px 12px;
    border-left:  1px  solid #ADADAD;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
footer  ul.footer-menu li a:hover,
footer  ul.footer-menu li a:focus,
footer  ul.footer-menu li a:active {
    color: #285935;
}
footer  ul.footer-menu li.rss-feed a {
    background: url(../images/rss.png) no-repeat right 0;
    padding-right: 20px;
}
footer  ul.footer-menu li:first-child a {
    border: none;
}

@media only screen and (min-width: 150px) and (max-width: 600px)

{
    .body{
        width: 90%;
        font-size: 95%;
    }
    #header-wrap {
    background: url(../images/header-bg.png);
        width: 100%;
        height: 70px;
        z-index: 99999;
        position: fixed;
        top: 0;
        left: 0;
    }
    header {
        position: relative;
        width: auto;
        height: 70px;
        margin: 0 auto;
    }
    header hgroup {
        position: absolute;
        background: url(../images/logo1.png) no-repeat;
        height: 56px;
        width: auto;
        display: block;
        top: 10px;
        left: 0;
    }
    header nav {
    background: url(../images/menu_nav-bg.png) left;
    margin-left: -2px;
    padding-left: 2px;
        margin-top: 25px;
    left: -1px;
    }
    header nav ul {
        font: bold 12px/25px  Helvetica, Arial, Sans-serif;
    margin-top: 50px;
    margin-left: 0px;
        padding: 0;
        list-style: none;
    }
    header nav ul li {
        float: left;
    }
    header nav ul a:link, header nav ul a:visited {
    color: #c5c4c4;
    margin-right: 20px;
    text-shadow: 0 -1px 0 rgba(10, 10, 10, 1); 
    }
    header nav ul a:hover,
    header nav ul a:active {
        color: #17a231;
    }
        section#main {
        width: auto;
        background: none;
    }
    section#main h1 {
        margin-top: 10px;
        margin-bottom: 15px;
    }
    section#main .intro-box {
        float:left;
    padding: 5px;
        width:50%;
        min-height: 300px;
    }
    section#main .intro-box p{
    font-size: 18px;
    width: 40%;
    }
    section#main .row .col h2 {
        margin-top: 15px;
        margin-bottom: 10px;
    }
}  

Thanks everyone!

1
Contributor
1
Reply
41
Views
3 Years
Discussion Span
Last Post by geneh23
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.