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 Responsive Layouts Media Queries Media Query Review

Johnathan Mercier
Johnathan Mercier
5,527 Points
Posted by Johnathan Mercier
Johnathan Mercier
5,527 Points

Media query fails across devices

Hi,

I am following along with the video using the workspace provided. In the video Nick adds an additional media query to float the nav menu to the right and the title to the left. This reduces the overall appearance of the header and the amount of scrolling needed.

The workspace attached already contained all the updated changes made throughout this video. I have confirmed everything matches exactly. Nothing is missing, but yet when I check the site in landscape mode the header content still does not adjust. I have checked using google developer tools, my motoe phone, the wife's alcatel phone. Nada. Is there an issue with the code? or has something changed since this video was produced? Its the default workspace provided at the start of the video.

Any help would be appreciated. I had a similar issue in the first class of the front-end dev course. Thanks

4 Answers

Johnathan Mercier
Johnathan Mercier
5,527 Points
Johnathan Mercier
Johnathan Mercier
5,527 Points

I separated the media queries and it works now! In the video it shows it should work by separating the lines using a comma. I wonder if something has changed since then or if its a browser issue. As long as it works now I am happy :D Thanks again!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Jonathan,

Have you included a viewport meta tag in the HTML document? This will ensure any media query changes will be shown in tablet and mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

Failing that, could you link or post your code here so we can have a closer look? Thanks. :)

Johnathan Mercier
Johnathan Mercier
5,527 Points
Johnathan Mercier
Johnathan Mercier
5,527 Points

Yes, I did check that and it is included. I deleted the workspace and reopened it to make sure something had not changed as well. I am still unable to get the nav to adjust during a landscape orientations, whether on an actual device or simulated with dev tools. Thank you again for taking the time to assist with this.

The lesson I am referring to is here:

Here is a chunk of the html up to and including the header in question:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Responsive Design</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

        <div class="header-container">
            <header class="wrapper clearfix">
                <h1 class="title">Responsive Design</h1>
                <nav>
                    <ul>
                        <li><a href="#">Grids</a></li>
                        <li><a href="#">Images</a></li>
                        <li><a href="#">Media Queries</a></li>
                    </ul>
                </nav>
            </header>
        </div>

and the @media query in question that should adjust it. 

@media only screen and (min-width: 768px),
       only screen and (min-width: 700px) and (orientation: landscape) {

  .title {
    float: left;
    font-size: 1.4em;
  }

  nav {
    float: right;
    width: 60%;
  }

  nav a {
    padding: 15px 1%;
  }

  .main article {
    float: left;
    width: 57%;
  }

  .main aside {
    float: right;
    width: 38%;
  }

}
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It looks like the problem is somewhere in your media query declaration.

I don't think you can have 2 min widths I'm the same declaration.

Try media only screen and (min-width: 768px) and (orientation: landscape) {}

As your media query.

Scott Junner
Scott Junner
9,010 Points
Scott Junner
Scott Junner
9,010 Points

I found that the two media queries combined using a comma did work. The problem for me was my viewport was not the right size, and once I started playing around with viewport sizing the given code worked just fine.

In other words it could be just simple user error. Check the width of the screen you are looking at.