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

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

Media queries not working on mobile device

Hi guys,

I have implemented media queries into my website. They work in a browser on the laptop but not on my iPhone 5.

A link to my website to view the source: http://www.shaundavidkelly.co.uk

Any ideas why?

Here is my CSS:

@media only screen and (max-device-width: 480px) {

    body {
        padding: 35px;
    }

    h1 {
        font-size: 31px;
    }

    h2 {
        font-size: 19px;
    }

    hr {
        margin: 15px 0 15px;
    }

    p {
        font-size: 12px;
    }

    li {
        height: 44px;
        width: 300px;
        margin-bottom: 6px;
        border-radius: 5px;
        display: list-item;
    }

    a {
    padding-top: 13px;
    }

    li:hover {
        background-color: black;
        height: 44px;
        width: 300px;
    }

}

1 Answer

Cian Mac Mahon
Cian Mac Mahon
17,657 Points

Have you added the Meta Tag in the head to set the width of the viewport depending on the size of the screen the content is being viewed on?

<meta name="viewport" content="width=device-width" />
Shaun Kelly
Shaun Kelly
35,560 Points

No i wasn't aware of this! This may be the problem! Thanks!