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 CSS Layout Basics CSS Layout Project Column Layout with Media Queries

J Scot Angus
PLUS
J Scot Angus
Courses Plus Student 5,891 Points
Posted by J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

How do I stack Secondary & Tertiary Cols to left of Primary Col using an additional mediaQuery?

I want to add an additional media query so that the Secondary & Tertiary Cols stack top-of-tertiary against bottom-of-secondary---to left of the Primary Col, starting at 1060px?

But, when I do this:

/* Here's the first media query, as instructed in the lesson; irrelevant CSS removed */
/* LAYOUT GOAL: 
   secondary and primary cols next to each other @50% width, tertiary col below @100% width */

@media (min-width: 769px) {  

.container {
    width: 90%;
    margin: 0 auto;
}

.name,
.col {
    float: left;
}

.primary,
.secondary {
    width: 50%;
    float: left;
}

    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

}


/* Here's the one I'm trying to add */
/* LAYOUT GOAL: 
   secondary and tertiary cols stacked @50% width to left of primary col @50% width */

@media (min-width: 1060px) { 

    .container {
        width: 80%;
        max-width: 1150px;
    }

    .primary {
        width: 50%;
    }

    .secondary,
    .tertiary {
        width: 50%;
    }
}

/* Here's the third media query, as instructed in the lesson, but with modified min-width */
/* LAYOUT GOAL: 
   secondary primary and tertiary cols next to each other @30%, 40% and 30% respectively */

@media (min-width: 1250px) { 

    .container {
        width: 80%;
        max-width: 1150px;
    }

    .primary {
        width: 40%;
    }

    .secondary,
    .tertiary {
        width: 30%;
    }
}

The top of tertiary is aligned with bottom of primary which produces an awkward gap between the secondary and tertiary cols.

Is it because of the clearfix?

Mark Truitt
Mark Truitt
17,230 Points

Can you fork your workspace and share it so we can see all of the code?

J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points
J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

Thanks Mark!

https://teamtreehouse.com/workspaces/17738732

[Edit] Whoops! Just read this: https://teamtreehouse.com/community/workspace-snapshots ... The tooltip "take snapshot of your workspace" made me think it was going to literally take a screenshot (which seems of limited value, but at the time -- in the moment -- I wasn't thinking that critically). I now see (after reading the article above) that Snapshot creates a read-only version of your workspace.

UX Note: if the tooltip had been more informative, I might have had my answer 8 hours ago. :-/

Will take a snapshot and post the link.

Mark Truitt
Mark Truitt
17,230 Points

No problem. However, we have to do a bit more before I can help. If you open up your work space. You have to take a Snapshot to share it. If you click on the camera looking icon it will pop up and say Take Snap shot, click on Take Snapshot and it will generate a link like this https://w.trhou.se/tijx8mouza which you can then copy/paste here and I can fork off of yours.

J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points
J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

Thanks Mark, here's the correct URL for shared workspace (aka "snapshot"):

https://w.trhou.se/kfrtnkx1xx

Mark Truitt
Mark Truitt
17,230 Points

If I'm understanding you right this is what your looking for?

https://w.trhou.se/kg0ocz8yet

J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points
J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

Yes! That's exactly what I was trying to do! Why do I get the feeling I'm about to feel really stupid? ;) I'll dive into comparing the differences between yours and mine, but feel free to chime in with the lesson.

Thanks Mark!

[Edit] OMG - I tried adding float: right to the primary class and I could swear that it didn't work! Hmm. Perhaps I was just too delirious from swimming in it for so long.