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 Unused CSS Stages Media Queries Device-Specific Media Queries: Part 1

Thomas Guppy
Thomas Guppy
3,307 Points
Posted by Thomas Guppy
Thomas Guppy
3,307 Points

Mozilla Firefox Media Query display issue

In Firefox the div class "sidebar col" displays at the bottom of the page when it should be to the upper right, also the search bar extends beyond the border of "sidebar col". I tested it in IE and it displayed correctly.

5 Answers

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Ok, had a look at your code and solved the issue. The following was not included in your page.css file.

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

Hope this helps!

Thomas Guppy
Thomas Guppy
3,307 Points
Thomas Guppy
Thomas Guppy
3,307 Points

Yes, that solved it. Thanks

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Remember to always use '' -moz-transform: '' in order to display elements correctly in Firefox. Display full code if need more help.

Thomas Guppy
Thomas Guppy
3,307 Points
Thomas Guppy
Thomas Guppy
3,307 Points

I grabbed the project files and searched for any "transform" properties and found none to apply the "-moz" vendor fix to. The problem is there in the project files from the start. I haven't added any code to cause this. Here is the style.css code relating to the sidebar and search bar:

.sidebar {
        margin-left: 3.127659574468%;
        width: 30.914893617021%; 
    }
    .search {
        width: 100%;
        position: relative;
        top: initial;
        right: initial;
        margin-bottom: 2em;
    }
}```

Here is the page.css code relating to the  sidebar and search bar:
```css
.sidebar {
    margin-top: 1em;
    background: #2980B9;
    color: #FFF;
    font-size: .95rem;
}
.search {
    position: absolute;
    top: 18px;
    right: 5%;
    width: 55%;
}
.search::before {
    position: absolute;
    top: 15%;
    left: 5%;
    display: block;
    color: #CCC;
    content: "\e000";
    font-size: 1.3em;
    font-family: "icomoon";
}
.search input {
    padding: 12px 15px 12px 45px;
    width: 100%;
    border: none;
    border-radius: 20px;
    font-size: 1em;
}
.sidebar ul {
    padding-left: 15px;
}
.sidebar ul li {
    margin-bottom: 1.3em;
}```
James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Sorry for late reply, if your still stuck can you upload the html so i can have a look working together with the css. Or if you solved it what was the problem.

Thomas Guppy
Thomas Guppy
3,307 Points
Thomas Guppy
Thomas Guppy
3,307 Points

Here is the section of index.html relating to the sidebar and search bar:

    ``` <div class="sidebar col">
            <div class="search">
                <input type="text" placeholder="Search">
            </div>
        </div> ```

I am now wondering if it could be due to a lack of a css reset such as normalize.css?

Thanks for the reply. If you want the entire pages of html or css just let me know.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Yea need everything i'm afraid, too hard to visualize it otherwise.

Thomas Guppy
Thomas Guppy
3,307 Points
Thomas Guppy
Thomas Guppy
3,307 Points

Ok. If possible it might be easier for you to grab the project files from deep dive it self Device-Specific Media Queries

Otherwise Here's the html

<!DOCTYPE html>
<html>
<head>
    <title>Media Queries</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Sintony:700">
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="main-header group">
        <div class="inner">
            <a class="logo" href="home.html"></a>
            <nav class="main-nav">
                <a link href="#">My Link 1</a>
                <a link href="#">My Link 2</a>
                <a link href="#">My Link 3</a>
                <a link href="#">My Link 4</a>
            </nav>
        </div>
    </header>
    <div class="wrap">
        <div class="content group">
            <div class="main col">
                <h1 id="title" class="title">CSS Preprocessors</h1>
                <div class="author group">
                    <i class="mike"></i> By: <a href="#">Mike the Frog</a> &ndash; May 20, 2013
                </div>
                <p class="intro">
                    You've probably already heard of <a href="http://css-preprop.com">CSS preprocessors</a> by now, but haven't quite plucked up the courage to try one because of the learning curve, or maybe because &ldquo;preprocessor&rdquo; just plain sounds intimidating. So let's put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we'll discuss the 3 most popular ones: <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">LESS</a> and <a href="http://learnboost.github.io/stylus/">Stylus</a>.
                </p>
                <a href="css3.html"><img src="img/css.jpg"></a>
                <h2>What's a Preprocessor?</h2>
                <p>
                    Preprocessors <strong>compile the CSS code we write</strong> in a processed language to the pure CSS syntax we're all used to. If you've recently considered using a CSS preprocessor, there's no better time to dive in with all the options and helpful tools available. 
                </p>
                <p>
                    Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that &ldquo;If it's not broken, don't fix it.&rdquo; But lately, many have realized just how powerful preprocessors can make our CSS.
                </p>
                <h2>Why Use One?</h2>
                <p>
                    There are various reasons why CSS preprocessors can be a valuable tool in our development process. First, they don't break browser compatibility; LESS, Sass and Stylus are all valid CSS and vice versa. Another advantage is preprocessors make our CSS DRY (Don't Repeat Yourself) by allowing us to create <a href="http://foo-var.com">variables</a> from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn't get out of hand and become difficult to manage.
                </p>
                <p>
                    Preprocessors save us time and do a lot of the tedious stuff for us because they have all the neat features we wish plain vanilla CSS had, like nesting selectors, math functions, referencing a parent selector, even reporting errors by telling us where and why there are errors in our code. 
                </p>
                <p>
                    The following are helpful tools that do most of the heavy lifting for you.
                </p>
                    <ul>
                        <li><a href="http://incident57.com/codekit/">CodeKit</a></li>
                        <li><a href="http://livereload.com/">LiveReload</a></li>
                        <li><a href="http://wearekiss.com/simpless">SimpLess</a></li>
                    </ul>
                <h2>Conclusion</h2>
                <p>
                    Hopefully now you're feeling more confident about using a CSS preprocessor. When in doubt, you can always fall back to plain CSS in your preprocessor file. Remember that you're not learning an entirely new language&mdash;just a new syntax.
                </p>
                <ul>

                </ul>
                <div class="comments">
                    <h3>Comments</h3>
                    <ul>
                        <li class="comment-post">
                            <span>Tommy Chalkers</span>
                            <p class="">I started learning Sass and I'm playing with SCSS. It's very fun so far, thanks!</p>
                        </li>
                        <li class="comment-post">
                            <span>Danny Wingo</span>
                            <p>I've been considering learning Sass &amp; Compass - would you say they are essential tools to a beginning designer?</p>
                        </li>
                        <li class="comment-post">
                            <span>Maty Seifer</span>
                            <p>I'm currently trying out Sass, I love it so far.</p>
                        </li>
                        <li class="comment-post">
                            <span>Andrew Poley</span>
                            <p>I've been using LESS for over a year. I really like it :)</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="sidebar col">
                <div class="search">
                    <input type="text" placeholder="Search">
                </div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at tincidunt dolor.
                </p>
                <ul>
                    <li>Donec porttitor egestas tellus eget ullamcorper. Etiam non leo convallis dolor cursus ultricies.</li>
                    <li>Maecenas lorem mi, fermentum id blandit nec, suscipit quis.</li>
                    <li>Proin nulla augue, dignissim et consequat id, pretium eget eros.</li>
                    <li>Vivamus vestibulum suscipit libero, vel luctus tortor pharetra sit amet.</li>
                </ul>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at tincidunt dolor.
                </p>
            </div>
        </div>
        <footer class="main-footer">
            &copy; 2013 - Awesome CSS3 Tutorials
        </footer>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="js/fittext.js"></script>
    <script type="text/javascript">
        $("#title").fitText(1.1, { minFontSize: '30px', maxFontSize: '72px' });
    </script>
</body>
</html>```
Thomas Guppy
Thomas Guppy
3,307 Points
Thomas Guppy
Thomas Guppy
3,307 Points

And here's the page.css

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: #EEE;
    color: #3A3A3A;
    font: 1.125em/1.62 sans-serif;
}
@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg#icomoon') format('svg');
}
h1, 
h2, 
h3 {
    margin: 0;
    font-family: 'Sintony', sans-serif;
    line-height: 1.3;
}
h2  {
    margin-top: 1.35em;
    color: #3498DB;
}
p {
    margin-bottom: 1.6em;
}
a {
    color: #2980B9;
}
.wrap, 
.main-header .inner {
    margin: auto;
    width: 90%;
}
.main-header {
    margin-bottom: 1.5em;
    border-top: 8px solid #2C3E50; 
    background: #3C5269;
    overflow: hidden;
}
.logo, 
.main-nav a {
    display: block;
    color: #FFF;
    text-decoration: none;
}
.logo::before {
    display: inline-block;
    margin: -4px 0 10px 0;
    padding: .4em .8em;
    border-radius: 5px;
    background: #3498DB;
    color: #FFF;
    content: "\e001";
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    font-family: "icomoon";
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.main-nav {
    margin-top: 10px;
}
.main-nav a {
    margin-top: 1px;
    padding: .6em .8em;
    background: #2B3C4E;
    color: rgba(255,255,255, .8);
}
.main-nav a:first-child {
    border-radius: 8px 8px 0 0;
}
.main-nav a:last-child {
    margin-right: 0;
    border-right: none;
}
.author {
    margin: 1em 0 3em 0;
    padding: 3.5% 0;
    border-bottom: 1px solid #d4d3d3;
    font-size: .9rem;
}
.mike {
    display: block;
    width: 50px;
    height: 50px;
    border: 2px solid #FFF;
    border-radius: 50%;
    background: #d0e6ec url('../img/mike.png') no-repeat 0 4px;
    float: left;
    margin: -13px 10px 0 0;
}
.main img {
    padding: .5em;
    width: 100%;
    border: 1px solid rgba(34,34,34,.3);
}
.sidebar {
    margin-top: 1em;
    background: #2980B9;
    color: #FFF;
    font-size: .95rem;
}
.search {
    position: absolute;
    top: 18px;
    right: 5%;
    width: 55%;
}
.search::before {
    position: absolute;
    top: 15%;
    left: 5%;
    display: block;
    color: #CCC;
    content: "\e000";
    font-size: 1.3em;
    font-family: "icomoon";
}
.search input {
    padding: 12px 15px 12px 45px;
    width: 100%;
    border: none;
    border-radius: 20px;
    font-size: 1em;
}
.sidebar ul {
    padding-left: 15px;
}
.sidebar ul li {
    margin-bottom: 1.3em;
}
.comments {
    margin-top: 10%;
    padding-top: 5%;
    border-top: 3px solid #BDC3C7;
    font-size: 1rem;
}
.comments ul {
    margin: 2.5em 0 0 0;
    padding: 0;
    list-style-type: none;
}
.comment-post {
    margin: 2.8em 0;
    padding-left: 80px;
    background: url('../img/avatar.png') no-repeat 0 4px;
    background-size: 55px 55px;
}
.comment-post:last-child {
    margin-bottom: 0;
}
.comment-post span {
    color: #3498db;
}
.comment-post p {
    margin: .4em 0;
    color: #616161;
}
.main-footer {
    background: #DDE0E2;
    font-size: 1rem;
}
.main-footer, 
.col {
    margin-bottom: 15px;
    padding: 3%;
    border-radius: 5px;
}

/* Clearfix */

.group:before,
.group:after {
    content: " ";
    display: table;
}
.group:after {
    clear: both;
}
Thomas Guppy
Thomas Guppy
3,307 Points
Thomas Guppy
Thomas Guppy
3,307 Points

And finally here's the style.css

 /* Phones to Tablets & Desktop */

@media screen and (min-width: 769px) {
    .main-header {
        padding: 35px 0 25px;
    }
    .main-header .inner {
        padding-left: 2.4%;
    }
    .logo {
        float: left;
    }
    .main-nav {
        float: right; 
    }
    .main-nav a, 
    .main-nav a:first-child {
        display: inline-block;
        margin: 0 .2em;
        padding: .35em 1em;
        border-radius: 8px;
    }
    .main {
        padding-top: 3.6%;
        width: 65.957446808511%;
    }
    .col {
        float: left;
    }
    h1 {
        font-size: 3em;
    }
    .sidebar {
        margin-left: 3.127659574468%;
        width: 30.914893617021%; 
    }
    .search {
        width: 100%;
        position: relative;
        top: initial;
        right: initial;
        margin-bottom: 2em;
    }
}
@media screen and (min-width: 1024px) { 
    .wrap, 
    .main-header .inner {
        width: 1000px;
    }
}

/* Device */