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

Design

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,143 Points
Posted by Nancy Melucci
Nancy Melucci
Courses Plus Student 36,143 Points

Can't make the tablet grid look right (Treehouse Front-End Techdegree project 2)

I am trying to submit the second project for the Front-End Tech Degree, but I cannot make the tablet grid look right. I am using a responsive grid based on calculations not a framework, and it looks ok for the small mobile and the large screen.

I am currently housing this at a student server...I have not yet submitted it. I will attach my css below...what is the media query for the 768 breakpoint? How do I rearrange the grid and gutters to go from 3 columns of 2 rows to 2 columns of 3 rows? Right now my images begin to overlap and then jump to the single column for the mobile view.

http://st3w.ivc.edu/kmcbean/cim249/nmelucci0/treehouseproject2/index.html

/* Columns  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*Desktop */
.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.53%;
}
.span_10_of_12 {
    width: 83.06%;
}

.span_9_of_12 {
    width: 74.6%;
}

.span_8_of_12 {
    width: 66.13%;
}

.span_7_of_12 {
    width: 57.66%;
}

.span_6_of_12 {
    width: 49.2%;
}

.span_5_of_12 {
    width: 40.73%;
}

.span_4_of_12 {
    width: 32.26%;
    text-align: center;

}

.span_3_of_12 {
    width: 23.8%;
}

.span_2_of_12 {
    width: 15.33%;
}

.span_1_of_12 {
    width: 6.866%;
}


@media only screen and (max-width: 480px) {
    .span_12_of_12 {
        width: 100%; 
    }
    .span_11_of_12 {
        width: 100%; 
    }
    .span_10_of_12 {
        width: 100%; 
    }
    .span_9_of_12 {
        width: 100%; 
    }
    .span_8_of_12 {
        width: 100%; 
    }
    .span_7_of_12 {
        width: 100%; 
    }
    .span_6_of_12 {
        width: 100%; 
    }
    .span_5_of_12 {
        width: 100%; 
    }
    .span_4_of_12 {
        width: 100%; 
    }
    .span_3_of_12 {
        width: 100%; 
    }
    .span_2_of_12 {
        width: 100%; 
    }
    .span_1_of_12 {
        width: 100%; 
    }


    h1 {

        font-size: 1.5em;

    }

header {

        position: absolute;

    }



ul.topnav {

width: 100%;

}

footer ul {


visibility: hidden;

}


.footer  {

visibility: hidden;

}


.bottom {

visibility: visible;
font-size: .5em;

}

.bottom p  {

font-size: .8em;
text-align: center;
background-color: #e0dd94;
}


.bottom a {

    text-decoration: none;
}

 }

2 Answers

Nicolas Hampton
Nicolas Hampton
44,638 Points

Nancy,

You're starting to work with and find your way around CSS, so great work so far! You're having trouble getting the tablet view for the site to work, but a large part of that problem is the way you're laying out your breakpoints with the "max-width" rule. The Max-width breakpoint rule, like you have here for widths 480px and above, does not allow your mobile layout to be built upon in your tablet or desktop layouts. That would require you to create three complete and separate layouts for mobile, tablet, and desktop, which isn't what we want. A good idea is to go back and define your breakpoints using no breakpoint for mobile styles, a min-width breakpoint for tablet views that makes only the needed changes from the mobile view, and a desktop min-width breakpoint that only makes the necessary changes from tablet views. A lot of the details of this is covered in the Responsive Web Design and Testing section of Nick's "How To Build A Website" course, so you'll want to go back to that section for a refresher: https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/responsive-web-design

Happy coding!

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,143 Points
Nancy Melucci
Nancy Melucci
Courses Plus Student 36,143 Points

Thanks for the tips. I appreciate your time. I also made a mentoring appointment tomorrow. I will rewatch those videos and post back when I am able. NJM