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

Eric Nevitt
Eric Nevitt
4,914 Points
Posted by Eric Nevitt
Eric Nevitt
4,914 Points

Responsive site breaking down.

www.n99design.com/portfolio

I am having trouble with my site. When it goes to a certain size some of the image becomes hidden. Here are the div classes that are being used. .project { width:300px; height:182; border:5px solid #000855;
margin:1%; /* required to hide the image after resized / overflow:hidden;
/ display div in line */ float:left; }

.row { width:90%; height:182px; float:left; padding-left:10%; margin:1%; }

<div class="row"> <div class="project"><a href="http://dnapllc.com/"> <img src="images/dittrich.jpg"></a></div> <div class="project"><a href="http://divorcelawstlmo.com/"><img src="images/davidhoward.jpg"></a></div> <div class="project"><a href="http://carneychiropracticinmoberly.com/"><img src="images/carneychiriopractic.jpg"></a></div> </div><!--end row-->

2 Answers

Andres Altuve
Andres Altuve
16,274 Points
Andres Altuve
Andres Altuve
16,274 Points

Are you using media queries? If not check out :

CSS Foundations

Media Querie section to be more specific.

Greetings.

Eric Nevitt
Eric Nevitt
4,914 Points
Eric Nevitt
Eric Nevitt
4,914 Points

Yes.

@charset "utf-8"; /* CSS Document */

body { background: #f2f6f8; color:#000; width:100%; font-size:1em; }

a { text-decoration:none; color: #000855; transition: color 1s 0s linear; }

header { width:100%; } /****** Menu ****/ ul.nav { background: #f2f6f8; / Old browsers / / IE9 SVG, needs conditional override of 'filter' to 'none' / background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjZmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Q4ZTFlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I1YzZkMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMGVmZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9)); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); / IE10+ / background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); / IE6-8 */

list-style:none; width:50%; margin-left:20%; margin-right:20%; overflow:hidden; border:solid 1px #000855; } ul.nav li { float:left; padding-left:2em; padding-right:2em; border-left: solid 1px #000855; border-right:solid 1px #000855; text-align:center; } ul.nav li:first-child { border-left:none; } ul.nav li:last-child { border-right:none; } ul.nav a:hover { color:#d5b417; }

/********* Main Body **********/ article { width:100%; height:auto; margin:0; } .text { width:29%; padding:1%; float:left; margin-left:10%; margin-right:5%; margin-top:auto; margin-bottom:auto; }

work_btn {

background:#000855;
color:#ffffff;
 transition: color 1s 0s linear;
width:25%;
text-align:center;
margin-top:300px;
margin-left:25%;
margin-right:25%;

}

work_btn a:hover {

background:#000855;
color:#758ea0;

} h1.work a { color:#d5b417; }

banner {

background:url(../images/banner.jpg); background-repeat:no-repeat; width:100%; height:625px; padding-top:180px; margin-left:10%; margin-right:10%; margin-bottom:0; } /******** project page *******/ .project { width:300px; height:182; border:5px solid #000855;
margin:1%; / required to hide the image after resized / overflow:hidden;
/ display div in line */ float:left; }

.row { width:90%; height:182px; float:left; padding-left:10%; margin:1%; } h1.project { background:#000855; color:#d5b417; width:100%; text-align:center; } /********** footer **********/ footer { width:100%; margin-top:35%; margin-left:40%; } h1 { font-size:2em; color:#d5b417; background:#000855; } h2 {

} h3 {

} h4{

} h5 {

} h6 { font-size:1.1em; } @media only screen and(max-width:768px) { img { width:100%; } header { width:100%; } /****** Menu **/ /****** Main Body **********/ article { width:100%;

} .text { width:30%; max-width:106px; height:400px; padding:1%; }

banner {

width:100%; max-width:320px; height:500px; margin-left:20%; margin-right:20%; }

/********* Project ********/ .project { width:300px; height:auto;
border:5px solid #000855;
margin:1%; / required to hide the image after resized */ float:left;

padding:5%;

}

.row { width:90%; height:182px; float:left; padding-left:10%; margin-top:50%; } footer { width:100%; } } @media only screen and(max-width:480px) { img { width:100%; } header { width:100%; } /****** Menu **/ /****** Main Body **********/ article { width:100%;

} .text { width:30%; max-width:106px; height:400px; padding:1%; }

banner {

width:100%; max-width:320px; height:500px; margin-left:20%; margin-right:20%; }

/********* Project ********/ .project { width:300px; height:auto;
border:5px solid #000855;
margin:1%; / required to hide the image after resized */ float:left;

padding:5%;

}

.row { width:90%; height:182px; float:left; padding-left:10%; } footer { width:100%; }

}

@media only screen and(max-width:320px) { img { width:100%; } header { width:100%; } /****** Menu **/ /****** Main Body **********/ article { width:100%;

} .text { width:30%; max-width:106px; height:400px; padding:1%; }

banner {

width:100%; max-width:320px; height:500px; margin-left:20%; margin-right:20%; }

/********* Project ********/ .project { width:200px; height:182px;
border:5px solid #000855;
margin:1%; / required to hide the image after resized */ float:left;

padding:5%;

}

.row { width:90%; height:182px; float:left; padding-left:10%; margin-top:50%; } footer { width:100%; } }