Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Qasim Hafeez
Qasim Hafeez
12,731 Points

Help with project please?

Hi,

I've been working on a website for my barber. I can't get the 3 divs under the main picture to center in the desktop view (min-width:950px). Can anyone see what I'm doing wrong? The project isn't finished but I'd appreciate any comments/criticism that anyone has to offer. Here is the url: http://176.32.230.251/qhafeezdomain.com/JackieSite2/

html/js

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="Haircuts, hair salon, shampoo, nails, salon, barber, senior discount">
<meta name="author" content="">
<title>Fresh Cuts by Jackie</title>
<link rel="apple-touch-icon" href="favicon.ico" color="green" >
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<link href="css/style.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">

            <h1>Fresh Cuts</h1>

            <button class="button">&#9776</button>

        </div>

    </header>
    <ul class="collapse">
                <a href=""><li>Services</li></a>
                <a href=""><li>Hours</li></a>
                <a href=""><li>Location</li></a>
            </ul>
    <div id="mainpic">
        <img id="bgpic" src="hairdresser.png"/>
        <h1>Fresh Cuts</h1>
        <img id="downButton" src="downarrow.svg" />
    </div>
    <div class="wrap">

    <div class="container clearfix">
        <div class="deskCont clearfix">

        <div id="services" class="  half tertiary">
            <h1>Services</h1>

            <img alt="Woman having hair shampooed by stylist" src="shampoo.jpg"/>
            <p id="description">We offer services for women, men, children and seniors.  Services include haircuts, nails, etc.  Tap the button below for a full list of services</p>
            <input type="button" id="showServ" value="Show Services"/>
            <div class="serviceWrap">

            <div class="servContainer clearfix">
                <p class="servType "><span>Hair Cuts</span><img src="hairdresser2.jpg"/></p>
                    <div class="typeContainer clearfix">
                        <p class="serv"><span>Women's Shampoo &amp; Cut</span></p><p class="price"><span>$20.00</span></p>
                        <p class="serv"><span>Men's Cut</span></p><p class="price"><span>$15.00</span></p>
                        <p class="serv"><span>Senior Women's Cut</span></p><p class="price"><span>$18.00</span></p>
                        <p class="serv"><span>Senior Men's Cut</span></p><p class="price"><span>$13.00</span></p>
                    </div>
                </div>

            <div class="servContainer clearfix">
                <p class="servType "><span>Color Services</span></p>
                <div class="typeContainer clearfix">
                        <p class="serv"><span>Root Touch-Up</span></p><p class="price"><span>$40 and up</span></p>
                        <p class="serv"><span>Full Color</span></p><p class="price"><span>$55 and up</span></p>
                        <p class="serv"><span>Partial Highlights</span></p><p class="price"><span>$55 and up</span></p>
                        <p class="serv"><span>Full Highlights (Same price for lowlights)</span></p><p class="price"><span>$75 and up</span></p>
                        <p class="serv"><span>Balayage</span></p><p class="price"><span>$85 and up</span></p>
                        <p class="serv"><span>Fantasy Colors</span></p><p class="price"><span>$80 and up</span></p>
                    </div>
            </div>

            <div class="servContainer clearfix">

                <p class="servType"><span>Keratin Treatment</span></p>
                <div class="typeContainer clearfix">
                    <p class="serv"><span>Milano's Alfa Part of Belicima</span></p><p class="price"><span>$60 per ounce</span></p>
                    </div>
            </div>

            <div class="servContainer clearfix">

                        <p class="servType"><span>Extensions</span></p>
                    <div class="typeContainer clearfix">
                        <p class="serv"><span>Microbraid with Weft</span></p><p class="price"><span>$35 per track and up</span></p>
                        <p class="serv"><span>I tip or U tip</span></p><p class="price"><span>$400 and up</span></p>
                        <p class="serv"><span>Tape</span></p><p class="price"><span>$30 per track and up</span></p>
                </div>
            </div>
            <div class="servContainer clearfix">

                <p class="servType"><span>Treatments</span></p>
                    <div class="typeContainer clearfix">
                        <p class="serv"><span>Deep Conditioner</span></p><p class="price"><span>$15</span></p>
                    <p class="serv"><span>Shine Glaze</span></p><p class="price"><span>$25</span></p>
                    </div>
            </div>
            <div class="servContainer clearfix">

                    <p class="servType"><span>Permanent</span></p>
                    <div class="typeContainer clearfix">
                        <p class="serv"><span>Permanent</span></p><p class="price"><span>$50 &amp; up</span></p>
                        </div>              
            </div>
            <div class="servContainer clearfix">

                <p class="servType"><span>Style &amp; Bridal</span></p>
                <div class="typeContainer clearfix">
                    <p class="serv"><span>Blow Dry</span></p><p class="price"><span>$30 &amp; up</span></p>
                    <p class="serv"><span>Formal Up do</span></p><p class="price"><span>$40 &amp; up</span></p>
                    <p class="serv"><span>Make up</span></p><p class="price"><span>$25 &amp; up</span></p>

                    </div>
            </div>
            <div class="servContainer clearfix">

                <p class="servType"><span>Nails</span></p>
                <div class="typeContainer clearfix">
                    <p class="serv"><span>Manicure</span></p><p class="price"><span>$12 (Spa $15) </span></p>
                    <p class="serv"><span>Pedicure</span></p><p class="price"><span>$25 (Spa $30)</span></p>
                    <p class="serv"><span>Mani &amp; Pedi</span></p><p class="price"><span>$35 ($25 on Tuesdays only)</span></p>

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

        <div id="hours" class="half  tertiary">
            <h1>Hours</h1>
            <div class="servContainer clearfix">
                <div class="typeContainer">
                    <p class="serv"><span>Monday</span></p><p class="price"><span>10AM - 4PM</span></p>
                    <p class="serv"><span>Tuesday</span></p><p class="price"><span>10AM - 4PM</span></p>
                    <p class="serv"><span>Wednesday</span></p><p class="price"><span>10AM - 4PM</span></p>
                    <p class="serv"><span>Thursday</span></p><p class="price"><span>10AM - 4PM</span></p>
                    <p class="serv"><span>Friday</span></p><p class="price"><span>10AM - 4PM</span></p>
                    <p class="serv"><span>Saturday</span></p><p class="price"><span>10AM - 4PM</span></p>
                    <p class="serv"><span>Sunday</span></p><p class="price"><span>Closed</span></p>
                </div>


            </div>

        </div>


            <div id="location" class=" tertiary">
                <h1>Location</h1>
                <img src="location.jpg"> 
                <p>We are located at:</p> 
                <p>5612 8th St W #1, Lehigh Acres, FL 33971</p>
                <p type="tel">Call us at: (239) 369-4247</p>

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

    <div class="overlay"></div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$('document').ready(function(){



    $('.serviceWrap').clone().appendTo('.overlay');






    $('header  button').click(function(){
        $('.collapse').slideToggle();
    });

    $('#downButton').click(function(){
        $('body').animate({scrollTop:$('#services').offset().top}, 700);
    });

    $('#showServ').click(function(){
        if($(window).width()<800){
            if($('#showServ').val()==='Show Services'){
                    $('#showServ').val('Hide Services');
                } else{
                    $('#showServ').val('Show Services');
                }

            $('.serviceWrap').slideToggle(800);
        } else{

            $('.overlay').toggle();

            $('.overlay').click(function(){
                $(this).hide();
            });



            }


    });



});
</script>

</html>

* {
  box-sizing: border-box; }

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: scroll;
  text-align: center; }
  .overlay .serviceWrap {
    border-radius: 5px;
    background: white;
    width: 60%;
    margin: 0 auto; }
    .overlay .serviceWrap .servContainer {
      margin: 20px 0 20px 0; }
    .overlay .serviceWrap .typeContainer {
      margin: 0 auto;
      width: 100%;
      border: 1px solid #eee;
      border-width: 0px 1px 1px 1px;
      border-radius: 0px 0px 5px 5px; }
    .overlay .serviceWrap .servType {
      width: 100%;
      background: #00b3b3;
      text-align: center;
      border: solid white 1px;
      border-radius: 5px 5px 0px 0px;
      height: 100px;
      display: table;
      position: relative;
      overflow: hidden;
      margin: 0; }
      .overlay .serviceWrap .servType span {
        display: table-cell;
        vertical-align: middle; }
      .overlay .serviceWrap .servType img {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        position: absolute;
        right: 0;
        top: 0;
        height: 100px;
        float: right;
        width: 15%; }
    .overlay .serviceWrap .serv {
      text-align: center;
      margin: 0;
      display: table;
      width: 69%;
      border-radius: 5px;
      border: 1px solid white;
      float: left;
      height: 60px;
      margin-bottom: 2px;
      margin-right: 1%; }
      .overlay .serviceWrap .serv span {
        display: table-cell;
        vertical-align: middle; }
      .overlay .serviceWrap .serv:active {
        background: black; }
    .overlay .serviceWrap .price {
      text-align: center;
      margin: 0;
      width: 30%;
      display: inline-block;
      border-radius: 5px;
      float: left;
      height: 60px;
      margin-bottom: 2px;
      display: table;
      border: 1px solid white; }
      .overlay .serviceWrap .price span {
        display: table-cell;
        vertical-align: middle; }
      .overlay .serviceWrap .price:active {
        background: black; }

.clearfix:after {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }

header {
  position: relative;
  background: white;
  height: 50px; }
  header .container {
    padding-top: 10px;
    margin: 0 auto;
    width: 95%;
    color: #008080; }
  header h1 {
    margin: 0;
    display: inline-block; }
  header button {
    float: right;
    background: none;
    font-weight: bold;
    border: none;
    color: white;
    padding: 0;
    background: #004d4d;
    font-size: 2em;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 50px; }

.collapse {
  position: relative;
  z-index: 1000;
  background: white;
  display: none;
  margin: 0;
  text-align: center;
  padding-left: 0; }
  .collapse a:link {
    text-decoration: none; }
  .collapse li {
    padding-top: 20px;
    padding-bottom: 20px;
    list-style: none;
    color: #008080;
    border-top: 1px solid white; }

#mainpic {
  background-color: #00b3b3;
  height: 400px;
  position: relative;
  color: white; }
  @media (min-width: 800px) {
    #mainpic {
      background-image: url("../hairdresser.png");
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 700px; } }
  #mainpic h1 {
    position: absolute;
    text-align: center;
    margin: 0;
    top: 50%;
    left: 0;
    right: 0; }
  #mainpic #bgpic {
    width: 100%;
    /*position: absolute;*/
    height: 100%; }
    @media (min-width: 800px) {
      #mainpic #bgpic {
        display: none; } }
  #mainpic #downButton {
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0; }

.wrap {
  color: #265372; }
  .wrap .container {
    width: 95%;
    margin: 0 auto; }
    .wrap .container h1 {
      margin: 0;
      padding-top: 20px;
      text-align: center; }
      @media (min-width: 800px) {
        .wrap .container h1 {
          padding-bottom: 1em; } }
    .wrap .container #description {
      text-align: center;
      /*background: darken($color, 10%);*/
      padding: 0;
      border-radius: 5px;
      font-size: 1.5em; }
    @media (min-width: 800px) {
      .wrap .container .deskCont {
        margin: 0 auto;
        width: 100%; } }
    @media (min-width: 800px) {
      .wrap .container #services, .wrap .container #hours {
        width: 50%;
        float: left; } }
    @media (min-width: 950px) {
      .wrap .container #services, .wrap .container #hours {
        width: 30%;
        float: left; } }
    .wrap .container #services img, .wrap .container #hours img {
      width: 100%;
      border-radius: 5px; }
    .wrap .container #services p, .wrap .container #hours p {
      text-align: center;
      /*background: darken($color, 10%);*/
      padding: 0;
      border-radius: 5px; }
    .wrap .container #services #showServ, .wrap .container #hours #showServ {
      width: 180px;
      height: 50px;
      display: block;
      margin: 0 auto;
      background: #00b3b3;
      border: white solid 3px;
      color: white;
      border-radius: 5px; }
    .wrap .container #services .serviceWrap, .wrap .container #hours .serviceWrap {
      display: none; }
    .wrap .container #services .servContainer, .wrap .container #hours .servContainer {
      /*border:.5px gray solid;*/
      margin: 20px 0 20px 0; }
    .wrap .container #services .typeContainer, .wrap .container #hours .typeContainer {
      margin: 0 auto;
      width: 100%;
      border: 1px solid #eee;
      border-width: 0px 1px 1px 1px;
      border-radius: 0px 0px 5px 5px; }
    .wrap .container #services .servType, .wrap .container #hours .servType {
      width: 100%;
      background: #00b3b3;
      text-align: center;
      border: solid white 1px;
      border-radius: 5px 5px 0px 0px;
      height: 100px;
      display: table;
      position: relative;
      overflow: hidden;
      margin: 0; }
      .wrap .container #services .servType span, .wrap .container #hours .servType span {
        display: table-cell;
        vertical-align: middle; }
      .wrap .container #services .servType img, .wrap .container #hours .servType img {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        position: absolute;
        right: 0;
        top: 0;
        height: 100px;
        float: right;
        width: 15%; }
    .wrap .container #services .serv, .wrap .container #hours .serv {
      text-align: center;
      margin: 0;
      display: table;
      width: 69%;
      border-radius: 5px;
      border: 1px solid white;
      float: left;
      /*background: darken($color, 10%);*/
      height: 60px;
      margin-bottom: 2px;
      margin-right: 1%; }
      .wrap .container #services .serv span, .wrap .container #hours .serv span {
        display: table-cell;
        vertical-align: middle; }
      .wrap .container #services .serv:active, .wrap .container #hours .serv:active {
        background: black; }
    .wrap .container #services .price, .wrap .container #hours .price {
      text-align: center;
      margin: 0;
      width: 30%;
      display: inline-block;
      border-radius: 5px;
      float: left;
      /*background: darken($color, 10%);*/
      height: 60px;
      margin-bottom: 2px;
      display: table;
      border: 1px solid white; }
      .wrap .container #services .price span, .wrap .container #hours .price span {
        display: table-cell;
        vertical-align: middle; }
      .wrap .container #services .price:active, .wrap .container #hours .price:active {
        background: black; }
    .wrap .container #location {
      text-align: center; }
      @media (min-width: 950px) {
        .wrap .container #location {
          width: 30%;
          float: left; } }
      .wrap .container #location img {
        width: 80%; }
      .wrap .container #location p {
        font-size: 1.5em; }

/*# sourceMappingURL=style.css.map */

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Do you mean that they don't quite fill out the space?

I noticed their widths are set to 30%. If you change it to 33.3% they will occupy the space better.

Suggestion: when the screen is wide enough, remove the "hamburger" and put the menu options on the right of the top line.

Qasim Hafeez
Qasim Hafeez
12,731 Points

No, I mean they're not centered. I had added the 'deskCont' class around the three divs thinking that if I centered the deskCont div it would fix it but it did not. I wanted them to be narrower but, your suggestion seems to work. Getting rid of the hamburger is next.

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

It looks very nice, clean. The only thing I noticed was at smaller screen width the images looked a little squished. Not the end of the world. Nice work

Qasim Hafeez
Qasim Hafeez
12,731 Points

Thanks. I wonder if you have some insight on another issue? In the mobile view, if you tap 'Show Services' and then resize it to the larger views without hiding the services div, the site breaks. If you tap 'hide services' under this circumstance, the div does not hide and the gray overlay of the desktop view appears but, without content.