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 Positioning Page Content Fixed Positioning

Posted by Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

why would the icon-location .svg image refuse to resize? I cleared cache and everything

Following the previous video, I added the icon-location image where it should be and styled accordingly, but the image remained (I think) 100% width. I commented out the img { width: 100%; } further up in the stylesheet, but it didn't change anything. Commented out the rule for the .icon-location class - changed nothing. Cleared cache... nothing changed. Even commented it out in the html, but nothing happened. It's a bit of a damper because I'm thinking I did the right thing, but I don't know if some code elsewhere in the background is affecting the image styling so the location icon image just wouldn't be affected by the code.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

I'm not sure if I understood your problem, but I guess you mean the mage remained huge?

In that case, you just need to specify a smaller percentage/px value. For example, 10% or 35px.

Does that work to you?

10 Answers

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi Daniel Amazigo,

----> First of all: great job with posting the code! That really helps a lot to spot the issues.

----> Second: please remember removing the 

display: none;

bit, as it will not show the icon.

----> Third, but I guess most importantly: Remember closing the headline code block here:

headline {
  margin-bottom: 0;
}  <---  /*  This is the symbol that I think will change your whole result. */

Try that one. The rest is perfect, I think, so it should work but otherwise let us know, OK?

HTH! :)

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

Hi Nico. Thanks so much for your prompt response. Well, this was part of the styling for the svg image in CSS, which I followed: .icon-location { position: absolute; width: 35px; ... } I didn't add any more statements to that rule because that's when I noticed the image remained huge, and I tried sorting that out first before actually positioning it. Shouldn't this have been enough to make it smaller?

..It's past 4 am over here.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

It should in itself. By the way, why the 

display: none

bit? I tried it and it wouldn't display the icon.

Do you think you could post your whole css and html files? Maybe it helps if we can see it in context.

To post the code, type three times the key under ESC on your keyboard (backtick I guess its called), then ENTER, in the next line write/paste your code. And after you ended writing/pasting it, type ENTER again, and then in the next line again, the three backticks.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Oh that's late! :)

OK, if you want tomorrow then, you post your code. There may well be some other rules affecting parent elements like img, etc.

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

I'm sorry, I later edited my comment. I added display: none when I was troubleshooting to see if it would make it disappear.

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

Okay, I will post the code later. Thanks so much for your help, Nico!

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

Hello Nico (or anyone that would like to help and has seen the thread), when you get a chance, like you suggested, here's the code: 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header class="main-header">
        <div class="container clearfix">
            <h1 class="name"><a href="#">Best City Guide</a></h1>
            <ul class="main-nav">
                <li><a href="#">ice cream</a></li>
                <li><a href="#">donuts</a></li>
                <li><a href="#">tea</a></li>
                <li><a href="#">coffee</a></li>
            </ul>
        </div>
    </header><!--/.main-header-->   

    <div class="banner">
        <img class="logo" src="img/city-logo.svg" alt="City">
        <h1 class="headline">The Best City</h1>
        <span class="tagline">The best drinks and eats in the best city ever.</span>
    </div><!--/.banner-->

    <div class="container clearfix">

        <div class="secondary col">
            <h2>Welcome!</h2>
            <p>Everything in this city is worth waiting in line for.</p>
            <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
            <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
        </div><!--/.secondary-->

        <div class="primary col">
            <h2>Great food</h2>

            <figure>
                               <img class="icon-location" src="img/location.svg" alt="Location">
                <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
                <figcaption>
                    <h4>Featured Drinks &amp; Eats!</h4>
                    Croissant macaroon pie brownie cookie marshmallow liquorice gingerbread caramels toffee.
                </figcaption>
            </figure>

            <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
        </div><!--/.primary-->

        <div class="tertiary col">
            <h2>How to get here</h2>
            <p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p>
            <p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin I love fruitcake toffee pie.</p>
            <p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>
        </div><!--/.tertiary--> 

    </div><!--/.container-->

    <footer class="main-footer">
        <span>&copy;2015 Residents of The Best City Ever.</span>
    </footer>

</body>
</html>

I hope I shared the code right this time.

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

And this is the stylesheet for it:

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3,
h4 {
    margin-top: 0;
}

h4 {
    margin-bottom: .4em;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

figure {
    margin: 0;
    line-height: 0;

  position: relative;
}

figcaption {
    font-size: .9em;
    line-height: 1.5;
    color: #fff;
    padding: 1em;   
    background: rgba(19,43,102, .85);

  position: absolute;
  bottom: 0;
  width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.25em;
    margin: 0;
}

.main-nav {
    margin-top: 5px;
}

    .name a,
    .main-nav a {
        display: block;
        text-align: center;
        padding: 10px 15px;
    }

    .main-nav a {
        font-size: .95em;
        color: #3acec2;
        text-transform: uppercase;
    }

    .main-nav a:hover {
        color: #093a58;
    }

/* ---- Layout Containers ---- */

.main-header {
    padding-top: .5em;
    padding-bottom: .5em;
}

.banner,
.main-footer {
    text-align: center;
}

.banner {
    color: #fff;
    background: #3acec2;
    padding: 3.2em 0;
    margin-bottom: 60px;
}

.col {
    padding-right: 1em;
    padding-left: 1em;
}

.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
}

/* ---- Page Elements ---- */

.logo {
    width: 190px;
}

.headline {
    margin-bottom: 0;

.icon-location {
    display: none;
    position: absolute;
    width: 35px;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

  .main-header {
    position: fixed;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0, .4);
  }

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

    .name,
    .col {
        float: left;
    }

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

    .main-nav {
        float: right;
    }

    .main-nav li {
        display: inline-block;
        margin-left: 15px;
    }

    .tagline {
        font-size: 1.4em;
    }

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

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

}

@media (min-width: 1025px) {

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

    .primary {
        width: 40%;
    }

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

}
Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

PS: I've seen that you could actually share the files, or the name of the file you're pasting code from appears on top of the code you paste here. How do you do that - if you know? This would be my first question / community discussion

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Oh! I forgot to answer you this question, sorry.

Do you mean something like...

style.css 
.class {
  color: black;
}

... that?

Pretty simple. Just do exactly the same you did, but also, immediately after the three opening backticks, write the name of the file (e.g.: style.css, my_file.html, or whatever).

NOTE: I am not yet sure what happens with syntax highlighting, I mean if it works perfectly, but maybe we could try it and see.

If you're somewhat like me, and like learning as much as you can from those who know and are passionate about what they do, you're surely going to like reading this, I mean the whole thing is priceless.

Also, you may probably like reading this one, even if little by little, since these forums are based on it.

Just recommendations, you don't need to if you you're not into it anyway. :)

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

Nico, thanks so much. You're the man! It's so easy to miss such things. And it got me quite frustrated. My goodness. Anyway, that's the effect not closing code properly can cause. Thanks so much.

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

I'm used to closing code properly and I don't think in my short while of coding etc that I've experienced something like this. I mean, I'm okay with mistakes - for sure - and I've missed other things, but haven't really missed closing code properly like in this way.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hey, glad that it was of help!

Don't worry, it is quite common to miss or misplace something in the code, and especially when you work so hard like the other day until the AM hours! Not something you should worry about. Don't let the imposter syndrome take you! How do you think I was able to spot it? Because I've done the same mistake myself not one, but many times :).

Most importantly keep on working as hard and doing a lot of mistakes, as that's what will allow you to improve (n keep on doing other mistakes :) )

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

Re: Your answer to my other question Thanks again, Nico, and thanks for those links. Yes, that is what I meant. I will take out time to go through the information there. I'm already having a look at the forum post following the first link. Thanks for taking out the time to answer my questions. I'll endeavour to do the same for someone else where I can :)