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 Michael Sims
Michael Sims
8,101 Points

Can you help with a small html/css issue?

Hello there everyone. So after learning a bit of coding here, I decided to try to build my website using a theme... which so far came out pretty good. The problem is there is a section where things aren't lining up properly. The link is here www.thinklions.com/dev. If you look in the "Services" section and down where there is a counter that says "57 Plans Written", you will see that the icon is not lining up center like the rest of them. I have added the html and css below. Any help would be greatly appreciated!!

<!-- start dark section -->
            <section class="dark">
                <div class="row">

                    <!-- start counter -->
                    <div class="medium-3 columns counter-box">                  
                        <div class="counter animated" data-perc="57">
                            <div class="icon-counter"><i class="icon tyger-ink-pen-streamline"></i></div>
                            <div class="number-detail">
                                <div class="number"></div>
                                <h3>Plans Written</h3>
                            </div>
                        </div>         
                    </div>
                    <!-- end counter -->

                    <!-- start counter -->
                    <div class="medium-3 columns counter-box"> 
                        <div class="counter" data-perc="26">
                            <div class="icon-counter"><i class="icon tyger-mic-1"></i></div>
                            <div class="number-detail">
                                <div class="number"></div>
                                <h3>Pitches Pitched</h3>
                            </div>
                        </div>        
                    </div>
                    <!-- end counter -->

                    <!-- start counter -->
                    <div class="medium-3 columns counter-box">           
                        <div class="counter animated" data-perc="10019">
                            <div class="icon-counter"><i class="icon tyger-cup-coffee"></i></div>
                            <div class="number-detail">
                                <div class="number"></div>
                                <h3>Cups of Coffee</h3>
                            </div>
                        </div>         
                    </div>
                    <!-- end counter -->

                    <!-- start counter -->
                    <div class="medium-3 columns counter-box">  
                        <div class="counter" data-perc="65">
                            <div class="icon-counter"><i class="icon tyger-happy-smiley-streamline"></i></div>
                            <div class="number-detail">
                                <div class="number"></div>
                                <h3>Happy Clients</h3>
                            </div>
                        </div>        
                    </div>
                    <!-- end counter -->

                </div>
            </section>
            <!-- end dark section -->

/* ==============================================
Counter
=============================================== */
.counter, .number {
    font-size: 3rem;
}

.counter-box {
    border-right: 1px solid #585858;
}

.counter-box:last-child {
    border: none;
}

.number {
    color: #ff4444;
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-family: "Montserrat", serif;

}

.number-detail {
    float: left;
    width: 100%;
}

.counter h2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: #717171;

}

.icon-counter {
    color: #fff;
    font-size: 46px;
    margin-bottom: -10px;

}



.counter h3 {
    font-size: 1.3rem;
    line-height: 1rem;
    color: #fff;

}

2 Answers

Justin Iezzi
Justin Iezzi
18,199 Points

Hey Michael,

The icon is lining up properly, strictly speaking. The base of the icon is more on the left side of itself since the feather pushes to the right, so it appears to be off center.

This is a pretty simple fix. I modified it with dev tools and this is what I came up with -

.tyger-ink-pen-streamline:before {
    position: relative;
    left: 8px;
    content: "4";
}

Find the .tyger-ink-pen-streamline:before rule and add the two properties I've added above the content property. That should fix your issue.

Hope this helps.

Michael Sims
Michael Sims
8,101 Points
Michael Sims
Michael Sims
8,101 Points

Wow lol, stupid me. I didn't even notice the issue being the feather lol. The fix worked perfectly, I ended up finding a better picture in the end. Thank you a lot my friend.