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
Ray Kennedy
Courses Plus Student 2,982 PointsWhat makes this site scale when you shrink the width without media queries
how is this site scaling without any media queries. I just did a tutorial before this one and I had to add media queries this has none of that. heres the css:
body {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}
ul {
list-style:none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background:white;
margin:10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}
/** Start Coding Here **/
#overlay {
background:rgba(0,0,0,0.7);
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:none;
text-align:center;
}
#overlay img {
margin-top: 10%;
}
#overlay p {
color:white;
}
heres what's in the html head:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
I have deleted things to see what makes this possible but havent come up with anything any response is greatful thanks
6 Answers
Shane Meikle
13,188 PointsUsing percentage based units of measure will scale the page and elements vs using a static unit.
For example:
#Container { width: 100% ; }
will take up 100% of its size even while shrinking.
#Container { width: 1000px; }
will be 1000px regardless of screen shrinkage (ie you will get the scrollbar and all that fun stuff).
This is just a very general simplification, but hopefully will help your understanding.
Ray Kennedy
Courses Plus Student 2,982 PointsThanks for the response. What I'm saying is the page is doing that and I without me adding that and I don't understand how. The page is scaling and I'm curious to how and why. the unordered list list items turn into 2 and 3 columns when you shrink the page, but there is no css for it to do that
Shane Meikle
13,188 PointsAre the UL and LI elements within a div with the ID of overlay? If so, try commenting out the width/height properties of that ID and see if it stops.
Ray Kennedy
Courses Plus Student 2,982 PointsNo it's not in a div. My code is up top exactly as I have it in the site. Just take a look at it and tell me what you think.
Shane Meikle
13,188 PointsCan you post the HTML code as well, without seeing that, it would make it hard to troubleshoot.
Ray Kennedy
Courses Plus Student 2,982 Pointsthis is the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Image Gallery</title>
</head> <body> <h1>Image Gallery</h1> <ul id="imageGallery"> <li> <a href="images/refferal_machine.png"> <img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"> </a> </li> <li> <a href="images/space-juice.png"> <img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"> </a> </li> <li> <a href="images/education.png"> <img src="images/education.png" width="100" alt="Education by Chris Michel"> </a> </li> <li> <a href="images/copy_mcrepeatsalot.png"> <img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"> </a> </li> <li> <a href="images/sebastian.png"> <img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"> </a> </li> <li> <a href="images/skill-polish.png"> <img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"> </a> </li> <li> <a href="images/chuck.png"> <img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"> </a> </li> <li> <a href="images/library.png"> <img src="images/library.png" width="100" alt="Library by Tyson Rosage"> </a> </li> <li> <a href="images/boat.png"> <img src="images/boat.png" width="100" alt="Boat by Griffin Moore"> </a> </li> <li> <a href="images/illustrator_foundations.png"> <img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"> </a> </li> <li> <a href="images/treehouse_shop.jpg"> <img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"> </a> </li> </ul> <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body> </html>
heres the css:
body {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}
ul {
list-style:none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background:white;
margin:10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}
/** Start Coding Here **/
#overlay {
background:rgba(0,0,0,0.7);
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:none;
text-align:center;
}
#overlay img {
margin-top: 10%;
}
#overlay p {
color:white;
}
Shane Meikle
13,188 PointsIt appears that the UL has an ID attached to it "imageGallery" which isn't showing in your CSS code posted. I don't see where the style for that would be linked though as there is only one CSS file appearing on the code, so that is interesting.
The only thing I could suggest is opening the page and using a code inspector to target the element and see the attached styles for it. For Firefox, you can right click and hit the 'q' button on the keyboard to bring it up.