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 Marvin Barger
Marvin Barger
5,433 Points

CSS Media Query Issues

So, I gone through "how to make a website" 100% with no real issue, HTML deep dive with no issue, and about 2/3 of the way through CSS deep dive with no issue.
With that said, I am going to continue with the lessons, but after a week of doing the projects along with the videos, I thought I should try and do a website for a family member's business, and then build on it later as my skills progress to help me learn better.
So I assumed I could build from what I learned in the "how to make a website" project, and customize it as I see fit to match what I want to do. I have hit a smallsnag, and cannot seem to sort it out. I am including a dropbox link to the root folder of this project: https://www.dropbox.com/sh/jdk4rpou4uuyeid/AACsxZ2ZlKNAm_hO6hyGowlka With that out of the way, I followed what Nick is doing except a few modifications here and there, but if you look at the site with the browser set to a "smaller phone" size it looks perfect, but after it goes above the 660 min-width my header area gets all wonky, and I have tried a lot of things to modify it. Take a look, essentially I want it just like Nick's where the logo is on the left and the nav is on the right......and here I thought I was really starting to grasp the techniques!

5 Answers

Nicolas Wolf
Nicolas Wolf
11,607 Points

Try this: 

@media screen and (min-width: 660px) { /*this targets screens that are 660px+ i.e. larger tablets*/
    nav {
        /*background-color: black; REMOVE*/
        /*float: right; REMOVE  we're already floating it with the header <a> below */ 
        background: transparent; /* RESET background for nav. let the header work for you */
        font-size: 1.5em;
        margin-right: 5%;
        text-align: right;
        width:100%;  /* set width to the full screen size to avoid spacing issues in float */
    }
    header {
        width: 100%;
        background-image: url("cssimg/header.jpg");
        margin-bottom: 50px; /* set the margin larger to accommodate the header */
    }
    header a {
        float: left;
        margin: 1%;
    }
}

Hope that points you in the right direction :)

Marvin Barger
Marvin Barger
5,433 Points

you nailed exactly what I needed to do. Thanks for your help on this!! Now to just address the nav li text-size!

Jon Knight
Jon Knight
7,184 Points
Jon Knight
Jon Knight
7,184 Points

Im not sure what you want the finished site navigation to look like at above 660 width.

I looked at you CSS and made some changes that I would do to start fixing it.

I would also consider adjusting "nav li a" font-size by adding a break point between the two just to ease the transition.

First: responsive.css

@media screen and (min-width: 660px) { /*this targets screens that are 660px+ i.e. larger tablets*/
    nav {
        /* background-color: black; */
        float: right;
        font-size: 1.5em;
        margin-right: 5%;
        text-align: right;
        /* width:65%; */
    }
    header {
        width: 100%;
        background-image: url("cssimg/header.jpg")
    ;
        height: 82px;
}

    header a {
        float: left;
        /* margin: 1%; */
    }
}

Second: in the main.css I would remove or comment out the background image from the nav... try this.

/***********************************
Colors
************************************/
/*site body*/
body {
    color: darkgray;
    /*did not set a background-color due to using image, but we will need to address that elsewhere.*/
}

/*header bar across top*/
header {
    background-image: url("cssimg/header.jpg");
}

/*nav background on mobile*/
nav {
    /* background-image: url("cssimg/header.jpg"); */
}

Again Im not sure what the end result your looking for is but this would work.

Let me know what you think.

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Marvin,

So I just modified your responsive.css file. I'm pretty sure I got the site to look (at least somewhat) like you wanted, although I can only say that subjectively considering I don't actually know how you wanted it to look.

Anyway, here's the code:

    nav {
        background-color: black;
        display: inline;
        font-size: 1.5em;
        margin-right: 5%;
        text-align: right;
    }

The first change I made was deleting the float: right; declaration. I removed this because when you float elements, they're lifted off of the page, and all of the other elements on the page act as if the floated element isn't there. That's the reason it was being wonky. I also added the display: inline; declaration. This sort of replaces the float and makes the links line up on the right side.

I hope that helps and is at least sort of what you were looking for!

Marvin Barger
Marvin Barger
5,433 Points
Marvin Barger
Marvin Barger
5,433 Points

Sorry I was not clear in my question up top, but it looks like Nicolas Wolf's solution set it straight for me! Thanks for taking a look at this for me, I need to dive deeper into float concepts and applications.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Marvin,

I'll assume by wonky that you mean the header doesn't fully contain the logo.

The original project had the header floated so that it would contain its floated children. Otherwise, a parent will collapse and not contain its floated children.

You seem to be missing this.

In main.css: (added float: left;)

header { 
  float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

Also, this floated header should be cleared with the next element after that which is your wrapper element.

In main.css: (added clear: both)

#wrapper {
  clear: both;
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
    background: white;  
}