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

Martina Reiter
Martina Reiter
17,654 Points
Posted by Martina Reiter
Martina Reiter
17,654 Points

Media query doesn't work.....connection between mobile and other devices and laptop browsers

I don't know if it's a silly question or not, but what ever i do the media query isn't working... when i was doing it some months ago it all worked perfectly.... now i'm doing a new website and i already did 4 versions and am constantly moving in circles with it regarding layouts on mobile devices and the ones on the laptop.

the media query works on the laptop when i resize the window but when i turn on the developer tools mobile layout it doesn't change a thing.... plus on the mobile layout he jumps from very small 18px to a super large 20px... has absolutely no middle. (the normalize.css is on)

i really don't know what to do :(

did they make some huge changes in smaller device settings or in the media query or am i doing something enormously wrong :/

mkmk
mkmk
15,897 Points

Please post your CSS so we can help.

Martina Reiter
Martina Reiter
17,654 Points
Martina Reiter
Martina Reiter
17,654 Points

sorry! here is the css: (i tried with space combinations, doesn't work. as soon as i put something in the media query he changes it everywhere)

a, li { text-decoration: none; text-shadow: 0.5px 0.5px 0.5px #000; }

img { max-width: 100%; }

header { background-image: url('../img/cover_web_small.jpg'); background-repeat: no-repeat; background-position: cover; background-size: 100%; margin: 1%; }

h1 { margin: 0; padding: 40% 5% 5% 40%; font-size: 45px; font-family: 'Didact Gothic', sans-serif; }

p { margin: 3%; padding: 0 10% 10% 25%; font-size: 19px; font-family: 'Didact Gothic' , sans-serif; text-align: center; }

nav li, footer li { display: inline-block; }

nav { border-top: solid 2px #000; max-width: 100%; }

nav, nav ul, footer ul { margin: 0; padding: 0; text-align: center; }

nav li { padding: 1%; padding-top: 30px; font-size: 45px; font-family: fantasy, sans-serif; vertical-align: middle; }

logo img {

width: 60px;

}

footer img { width: 40px; padding: 0 2% 0; text-align: center; }

a:link, nav a, p a { color: darkred; text-decoration: none; }

a:visited { color: none; }

a:hover { color: #000; }

/**************************************/

@media(min-width:320px){ header { background-image: url('../img/cover_web_xl.jpg'); margin: 0 10% 1.5% 0; }

h1 {
padding: 25% 5% 2% 35%;
font-size: 30px;

}

p {
padding: 1% 10% 7% 40%;
margin: 0;
font-size: 20px;

} }

2 Answers

Aaron HARPT
Aaron HARPT
19,845 Points
Aaron HARPT
Aaron HARPT
19,845 Points

Try adding this meta tag to the head of your html: 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Martina Reiter
Martina Reiter
17,654 Points
Martina Reiter
Martina Reiter
17,654 Points

Thank you! Problem solved! Now i feel stupid o.O