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
shawn orr
859 Pointsim working on how to make a website, but when i try to view the website on my galexy s4 it looks like the full desktop
the phone version doesn't resize like they said it would in the video
shawn orr
859 Pointshttp://ptecwebdev.com/sorr/project/
that is the sight and ill try to get the code
shawn orr
859 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Shawn Orr | developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Shawn Orr</h1> <h2>developer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li>| <li><a href="about.html">about</a></li> | <li><a href="contact.html">contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>color</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>blending</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>trying</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>drips</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>shapes</p> </a> </li> </ul> </section> <footer> <img src="img/twitter-wrap.png" alt="twitter" class="social"> <img src="img/facebook-wrap.png" alt="fb" class="social"> <p>© 2014 Shawn Orr.</p> </footer> </div> </body> </html>
/*********************************** general ************************************/ body { font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration:none; }
img { max-width: 100%; }
/************************************** heading ***************************************/ header { float:left; margin:0 0 30px 0; padding:5px 0 0 0; width: 100%; }
logo {
text-align:center; margin:0; }
h1 { font-family:'Changa One', sans-serif; margin: 15px 0; font-size:1.75em; font-weight:normal; line-height:0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight:normal; }
/************************************** navigation ***************************************/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0;
}
nav ul { list-style: none; margin: 0 10px; padding: 0; color:#CC6600; }
nav p { color:black; } nav li { display:inline-block
}
nav a { font-weight:800; padding: 15px 10px;
}
/************************************** footer ***************************************/ footer { font-size: 0.75em; text-align:center; padding-top: 50px; color: #ccc; clear: both; }
.social { width:20px; height:20px; margin:0 5px;
}
/************************************** portfolio ***************************************/
gallery {
margin:0; padding:0; list-style:none; }
gallery li {
float: left; width:45%; margin:2.5%; background-color: #FFCC66; color:#fff; }
gallery li a p {
margin: 0; padding:5%; font-size:0.75em; color: #fff; }
/********************************* colors **********************************/
body { background-color:#fff; color:#999; }
/green header/ header { background: #fea801; border-color:#599a68 }
/background moble/ nav { background:#fea801; }
h1,h2 { color: #fff; }
a { color: #fea801; }
nav a,nav a:visited { color:#fff; }
nav a.selected, nav a:hover{ color: #32573f; }
1 Answer
matt hunter
13,613 PointsFor sites to readjust their size and format for different sized screens you can add:
@media screen (max-width: "the width of your device's resolution") { any changes you want to make }
However, the Galaxy S4 has a resolution of 1080x1920 which can support full sized websites.
You can, in place of "screen" use device-aspect-ratio or orientation to specify a mobile device.
Here is a good resource to look at different logical operators for the media queries. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation
matt hunter
13,613 Pointsmatt hunter
13,613 PointsCan you post your code? Specifically if you have any media queries.