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
Jonathan Tung
3,225 PointsMedia queries on my website are applied on browser, but not mobile devices. Help!
Guild teaches to use this line meta name="viewport" content="width=device-width" so device and browser width sizes are read the same. I've tried it on my website and it doesn't work. Any suggestions?
6 Answers
Wayne Priestley
19,579 PointsHi Jonathan,
Did you try initial-scale?
<meta name="viewport" content="width=device-width, initial-scale=1">
Jonathan Tung
3,225 PointsYes I tried that as well. Nick Pettit's "How to make a website" course suggested that. Then I just took out the 'initial-scale=1" part, still didnt work..
Wayne Priestley
19,579 PointsCould you post your media query code please Jonathan.
Jonathan Tung
3,225 Points/*FOR PHONE SIZE*/
@media screen and (max-width: 480px) {
h1 {font-size: 2.75em; margin: 5px; width: 95%;}
h2 {/*font-size: 1.2em; margin:2px; width: 95%;*/display: none; }
h3 {font-size: 1.9em; text-transform: uppercase; text-shadow: 1px 1px 1px gray;}
h5 {background-image: -webkit-linear-gradient(gray, #e6e6e6);border-radius: 20% 20% 0% 0%;
margin: .2em auto 0px;width: 100%;padding: .5em .5em;}
#logo {float: center; width: 100%;}
body { font-size: .75em;}
header {height: 100px; margin-top: 0px; position: none;}
nav {font-size: 1.2em;margin-right: 5%;width: 95%;text-align: center;
padding: 0px 5px;margin: 5px 0 0;float: clear;-webkit-justify-content: center;}
nav ul {-webkit-justify-content: center;;}
nav li {margin: 4px 2px; padding: 0px 0px;}
/* HOME PAGE*/
#homep {
float: center;
padding: .5% .5%;
margin: 5% auto ;
min-width: 95%;
}
#selfie {width: 95%; /*min-width: 150px*/; float: center; margin: 1em 2% 0px; }
#wrapper p {margin: 10px 2% 0px; padding: 5px 5px;}
#wrapper {margin: 105px auto 5%;float: center;}
/*background page*/
#wrapper div p {font-size: 1.2em;}
.bgconc {font-size: 1em;}
#educationp, #ucdp, #gnep, #advp {text-align: left;}
.ucd p {margin-top: .1em;}
.edu, .gne, .ucd, .adv {padding: 1px 2px;margin: 0px auto;width: 99%;}
#chmsicon, #ucdicon, #gneicon, #advicon {box-shadow: 2px 2px 2px 2px gray;border-radius: 5%;
display: block;margin: 1em auto;max-width: 95%;}
.ucdbg li p, .gnebg li p {background-color: #e6e6e6;text-align: left;font-size: 1.2em ;
margin: 0px auto;padding: 2px 2px;max-width: 100%;}
.ucdbg li, .gnebg li {background-color: #e6e6e6;list-style: none;
width: 95%;margin: 0px auto;padding: 2px 2px;}
.ucdbg, .gnebg {width: 100%;margin: 2px auto;padding: 2px 2px;}
/*hobbies page*/
.hobbieswrapper {margin: 150px auto 5px;}
.hobbieswrapper h3 {font-size: 3em; text-transform: uppercase;text-shadow: 1px 1px 1px gray;}
#galleryhobby, #gallerytv { width: 100%; padding: 2px 2px; margin: .1em auto;}
#galleryhobby li, #gallerytv li {margin: 1em auto;text-align: center;max-width: 99%;}
#galleryhobby li img, #gallerytv li img {margin: 1em auto;max-width: 99%;}
#galleryhobby li p, #gallerytv li p {font-size: 1.2em; margin: 2px auto; text-transform: capitalize;}
#gallerytv li p {display: none;}
/*contact page*/
#contactwrapper {margin: 150px auto 5px; font-size: 1.2em;}
#contactwrapper h3, .contactdetails h3 {font-size: 2em; text-transform:
uppercase;text-shadow: 1px 1px 1px gray; text-align: center; margin-top: .5em;}
#contactwrapper, .contactdetails {padding: .5em .5em; margin-right: 20%; width: 95%;}
.contact-info {margin: 1em auto;margin-top: 2px;}
.contactall {margin: .3em auto;}
.contact-info a:hover {color: blue; font-weight: bold;}
.contact-info li:hover {color: green;}
}
Jonathan Tung
3,225 Pointsyep I put that line and it still doesn't work. Hmm..
Wayne Priestley
19,579 PointsHi Jonathan,
Found a few errors in your code that need a fix:
You have a few 0 values specified and you have a % on them border-radius: 20% 20% 0% 0%; you need to remove the %, there are a lots examples of this, you'll need to work your way through the code to correct this.
There is float left, right, none or inherit, you have #logo {float: center; width: 100%;} there is no such thing.
There is position static, relative, inherit, absolute, fixed, you have header {height: 100px; margin-top: 0px; position: none;} there is no such thing.
A float error, you have float: clear; there is no such thing.
You have specified a width of 100% in places, then added margin and padding, that could cause a problem depending whether or not you have border-box set.
You have re-defined the same h3 in the same media query.
There are quite a few instances of each of the above in your code Jonathan, if you work through them then we can see where we are, if you need any more help or a better explanation of anything just ask okay.
Don't forget to let us know how it goes.
If you break your code down on separate lines it will be easier to read too.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Jonathan,
If you resize down to mobile size on your desktop then you're seeing the correct layout?
What do you see on a phone? A zoomed out desktop layout?
The meta tag that Wayne has already posted should fix that situation.
Here's what's used in "How to Make a Website":
<meta name="viewport" content="width=device-width, initial-scale=1.0">