Bummer! You must be logged in to access this page.

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 Matthias Nörr
Matthias Nörr
8,614 Points

Layout does not break into two columns on mobile (How to make a Website)

Hi, can someone please tell me, if my media queries are correct?

/*responsive.css*/

/*two column layout*/

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

    #gallery li:nth-child(2n+1) {
        clear: left;
    }

}


@media screen and (min-width: 480px) {

    #primary {
        width: 50%;
        float: left;
    }

    #secondary {
        width: 40%;
        float: right;
    }


    #gallery li {
        width: 28.3333%
    }


    .Profilbild {
        float: left;
        margin: 0 5% 80px 0;
    }
}

/*three column layout*/

@media screen and (min-width: 660px) {

    nav {
    background: none;
    float:right;
    text-align: right;
    font-size: 1.125em;
    margin-right: 5%;
    width: 45%;
    }

    #logo {
        float: left;
        margin-left: 5%;
        text-align: left;
        width: 45%;
    }

    h1 {
        font-size: 2,5em;
    }

    header {
        border-bottom: 5px solid #2cbaa9;
        margin-bottom: 60px;
    }

}
Matthias Nörr
Matthias Nörr
8,614 Points

Here is my index.html file. 

<!index.html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Matthias N&oumlrr </title>
    <link rel="stylesheet" href="./normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Orbitron:400,700|Ubuntu:400,400italic,700,700italic|Nunito:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="./stylesheet.css">
    <link rel="stylesheet" href="./responsive.css">

<!used fonts: Orbitron, Ubuntu, Nunito>

</head>
<body>
    <header>
        <a href="index.html" id="logo">
            <h1> Matthias N&oumlrr </h1>
        </a>
        <nav>
            <ul>
                <li> <a href="index.html" class="selected"> Portfolio </a> </li>
                <li> <a href="about.html"> About </a> </li>
                <li> <a href="kontakt.html"> Kontakt </a> </li>
            </ul>
        </nav>
    </header>
        <div id="Mitte">
            <section>
                <ul id="gallery">
                    <li>
                        <a href="https://trafficnight.de/">
                        <img src="./bilder/trafficnight.jpg" alt="Landing Page für Netzwerk-Event"> 
                        <p>Trafficnight</p>
                        </a>
                    </li>
                    <li>
                        <a href="./bilder/wiese.jpg">
                        <img src="./bilder/wiese.jpg" alt="Grüne Wiese im Nymphenburger Schlosspark"> 
                        <p>Wiese in Nymphenburg.</p>
                        </a>
                    </li>
                    <li>
                        <a href="./bilder/party1.jpg">
                        <img src="./bilder/party1.jpg" alt="Geburtstagsfeier 1"> 
                        <p>Feier.</p>
                        </a>
                    </li>
                    <li>
                        <a href="./bilder/party2.jpg">
                        <img src="./bilder/party2.jpg" alt="Geburtstagsfeier 2"> 
                        <p>WG-Party.</p>
                        </a>
                    </li>
                    <li>
                        <a href="./bilder/schaufenster.jpg">
                        <img src="./bilder/schaufenster.jpg" alt="Schaufenster bei Nacht"> 
                        <p>Schaufenster bei Nacht.</p>
                        </a>
                    </li>
                    <li>
                        <a href="./bilder/stachus.jpg">
                        <img src="./bilder/stachus.jpg" alt="Stachus bei Nacht"> 
                        <p>Stachus bei Nacht.</p>
                        </a>
                    </li>
                    </ul>
            </section>
            <footer>
                <a href="https://www.xing.com/profile/Matthias_Noerr?sc_o=mxb_p"><img src="./bilder/xing.png" alt "Xing Logo" class="social-icon"> </a>
                <a href="https://de.linkedin.com/in/matthias-n%C3%B6rr-04a29154"><img src="./bilder/linkedin.png" alt "Linkedin Logo" class="social-icon"> </a>
                <a href="https://teamtreehouse.com/matthiasnrr"><img src="./bilder/treehouse.png" alt "Treehouse Logo" class="social-icon"> </a>
                <p>&copy; 2016 Matthias N&oumlrr.</p>

            </footer>
        </div>
</body>
</html>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Matthias,

Are you saying that your gallery remains 3 columns at all screen sizes?

You're probably going to need to post your css for mobile styles as the problem would likely be in there.

David Bath
David Bath
25,940 Points

I don't see any elements with the id primary or secondary. Are those supposed to be your columns? If so, that would explain why there aren't two columns!

David Bath
David Bath
25,940 Points

It's hard to know what's happening without seeing stylesheet.css. Could you post that file as well?

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

responsive.css is meant for the tablet and desktop styles since a mobile first approach was taken here. main.css is the one that contains styles for mobile.

It looks like you're missing one of the meta tags in your html.

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

This would need to be added to each of your html files. Without it, mobile devices will scale down the desktop view.

I don't remember when it was added in the course but Nick did cover it at some point.

Matthias Nörr
Matthias Nörr
8,614 Points
Matthias Nörr
Matthias Nörr
8,614 Points

The elements with the id primary and secondary are on my about page. That is not the problem. My gallery in the index.html remains 3 columns at all screen sizes. The CSS-file that is supposed to control the mobile styles is the file "responsive.css" that I posted in my first comment. The responsive.css is supposed to change the layout into two columns for small screen sizes.

Matthias Nörr
Matthias Nörr
8,614 Points
Matthias Nörr
Matthias Nörr
8,614 Points

The layout is actually split into two columns when the browser is small. But this does not happen if I open the site on my smartphone. The break points are also ignored in the google developers view.

Matthias Nörr
Matthias Nörr
8,614 Points
Matthias Nörr
Matthias Nörr
8,614 Points

Hi Jason, this solved my problem. I remember now that this was covered in the course :) Thank you!

And also thanks to David.