Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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 :/

Please post your CSS so we can help.

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

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

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