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

HTML

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Fixing "Ribbit" Icons

CSS Frameworks, Stage 3, Video 6.

I can't seem to figure out why the icons for the Ribbit app project won't show up properly,

I've put the files as they currently are on my website. http://www.jonniegrieve.co.uk/tmp/ribbit/index.html

Half of one icon appears to be appearig in 2 spaces and none of them are small enough to show up fully in their places. And I don't know why this should be.

I don't think it's a problem with image resolution asn I've tested it with the same imge in another stage.

I can't find a problem with the relevant HTML5 or CSS either.

I'll post it here!

<div class="container">

        <div class="row ft">    

            <div class="col-sm-6 hidden-xs">
                    <div class="ft-icon camera"></div>
            </div>

            <div class="col-sm-6 ft-copy">
                <h2>Securely delete photos &amp; video based on a timer</h2>
                <p>
                    Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the vode that deletes them from the back-end to make them "self destruct."
                </p>    

            </div>  

      </div>

      <div class="row ft">  

            <div class="col-sm-6 ft-copy">
                <h2>Securely delete photos &amp; video based on a timer</h2>
                <p>
                Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."
                </p>

            </div>  

            <div class="col-sm-6 hidden-xs">
                <div class="ft-icon friends"></div>
            </div>

      </div>

      <div class="row ft">  

            <div class="col-sm-6 hidden-xs">      
                <div class="ft-icon cloud"></div>
            </div>

            <div class="col-sm-6 ft-copy">
                <h2>Securely delete photos &amp; video based on a timer</h2>
                <p>
                Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."
                </p>

            </div>  

      </div>

    </div>

.main-logo {
    width: 124px;
    height: 34px;
    margin-top: 22px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url('../img/main-logo.png') no-repeat;
    background-size: 100%;
}

.ft-icon {
    width: 94%;
    height: 196px;
    position: relative;
    background: #8c73b0 url('../img/main-bg.png') no-repeat 270px -180px;
    background-size: 140%;  
}

.ft-icon::before {
    content: "";
    display: block;
    position: absolute;
    width: 164px;
    height: 102px;
    top: 0px;   
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    background: url('../img/feature-icons.png') no-repeat;
    background-size: 100%:
}

.friends::before {
    background-position: 0 -105px;
}
.cloud::before {
    background-position: 0 -210px;
}

.ft-icon.friends {
    background-position: -500px 0;
}
.ft-icon.cloud {
    background-position: 260px 0;
}

1 Answer

Shawn Jones
Shawn Jones
15,579 Points
Shawn Jones
Shawn Jones
15,579 Points

Hey man,

I tried going to the link to see what you were talking about but the page didn't display correctly and I couldn't figure out which icon you were talking about. judging by what you have written, I feel there's one of two things going on here. You could have either, not set the parent container size of the image and it's currently collapsed which is hiding the image, or it looks like you have images layered on top by I don't see any z-index property being used, so that could mean that your covering up a current image with the image you want to see.

Like I said I can't really give you a better answer unless I have something I can visually look at. I know for a fact that when I set icon images in css instead of html, I always get killed by the fact that the parent box doesn't have a determined width and height, and since there is nothing in the box in the structure of the site, without the determination of size from an object, the box is technically closed, if you look at it through inspect element in chrome or firebug in firefox, you will see the parent element represented with just a line because it's collapsed on itself.

When you get the page up, let me know, and I will look at it again.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

I solved it in the end in another thread (I'd forgotten I'd posted this one!)

Turns out in .ft-icon:: before I had an extra colon where a semi colon should be in my background-size declaration. That had me looking and scratching my head for days let me tell you. :p