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

Mikedaniel Ocasio
seal-mask
.a{fill-rule:evenodd;}techdegree
Mikedaniel Ocasio
Full Stack JavaScript Techdegree Student 15,790 Points
Posted by Mikedaniel Ocasio
.a{fill-rule:evenodd;}techdegree
Mikedaniel Ocasio
Full Stack JavaScript Techdegree Student 15,790 Points

What am I doing wrong?

I'm trying to create columns with the images so they are side by side using the calc function in CSS however it doesn't seem to be working? Im trying to do this as a project for the techdegree.

Any insight would be greatly appreciated. Thanks!

<body>
<div class="container">
        <nav class="main-nav" id="#TOP">
        <h1>Mikedaniel</h1>
            <a href="#">HOME</a>
            <a href="#">PORTFOLIO</a>
            <a href="#">CONTACT</a>
        </nav>
    <img src = "images/profile.png" class="profile_img"/>
        <p class="bio"> Hi! I'm a front end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!</p>
        <!Portfolio images!>
    <div class="portfolio">
        <h3>Portfolio</h3>

    <div class="col-2">
    <img src = "images/portfolio-1.png" class="img"/>
        <h3>Marketing page</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
    <img src = "images/portfolio-2.png" class="img"/>
    <div>

    <div class="col-2">
        <h3>Search page</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
    <img src = "images/portfolio-3.png" class="img"/>
    </div>
    <div class="col-2">
        <h3>Travel app</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
    <img src = "images/portfolio-4.png" class="img"/>
    </div>

    <div class="col-2">

    <h3>Map of favorite spots</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
    <img src = "images/portfolio-5.png" class="img"/>
</div>

<div class="col-2">
    <h3>Map of favorite spots</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
    <img src = "images/portfolio-6.png" class="img"/>
</div>

<div class="col-2">
    <h3>Map of favorite spots</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
</div>
</div>
        <!Footer!>
<div class="footer">
    <h3> Contact </h3>
    <p> If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
    <p>Phone (000)000-0000 </p>
    <p>Email (000)000-0000 </p> 
</div>

body {
    background-color: #F7F7F7;
}
p{
line-height: 1.6em;
width: 80%;
display: flex;
margin:2em auto;
justify-content: space-between;

}
.container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: arial;
}
.main-nav{
    display:flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-between;
    margin-bottom: 2em;
}
.bio {
    color:gray;
}
.main-nav a{
    color:black;
    font-family: arial;
    font-weight: bold;
    background-color: white;
    padding: 14px;
    margin:.2em;
    text-decoration: none;
}
.profile_img {
    width:70%;
    margin-top: 2em;
}
.img{
    margin-top: 
    15px;
    margin-bottom: 15px;

}
.portfolio {
    background-color: white;
    padding: 15px 0;
    width: 100%;
}
.portfolio img{
    width: 90%;
}

.footer {
    margin-top: 5em;
    margin-bottom: 5em;
}
.bottomlinks {
    padding-top: 2em;
    padding-bottom: 2em;
    border-top: 1px;
    border-left:0;
    border-bottom: 0;
    border-right: 0;
    border-style: solid;
    border-color: black;
    font-weight: bold;
    font-size: 12px;

}
.bottomlinks a{
    text-decoration: none;
    color:black;

}
.bottomlinks p{
    display: inline;
    margin-right: 50%;

}

@media (min-width: 768px) {


    .col-1{
        width: calc(100% / 12);
    }

    .col-2 {
        width: calc(100% / 12 *2);
    }

    .col-3 { 
        width: calc(100% / 12 * 3);
    }

    col-4 {
        width: calc(100% / 12 * 4);
    }

    col-5 {
        width: calc(100% / 12 * 5);
    }

}
Chyno Deluxe
Chyno Deluxe
16,936 Points

//fixed code presentation

2 Answers

Luke Towers
Luke Towers
15,328 Points
Luke Towers
Luke Towers
15,328 Points

There are several reasons that your code is not working.

  • The col-4 and col-5 CSS rules are both missing the dot selector which denotes that they select elements with the class col-4, instead of elements of the type col-4.
  • The divs themselves are all labelled with class "col-2", which means that only the CSS rule for .col-2 will be applied, and it will be applied to all of them.
  • The containing div that holds your divs (right below the <h3>Portfolio</h3> tag) is also set to .col-2 which means that any CSS rules will be applied to it, hence will also be inherited by the child elements. This means that any styles you apply to .col-2 will be essentially applied to children .col-2 elements twice. Specifically, if you set .col-2's width to 50%, that width will be 50% of its parent container. Since a .col-2 is a child of a .col-2 in this case, the parent .col-2 will be 50% of its parent's width, and its child .col-2 will be 50% of its width, making the child .col-2 25% of the parent container of the first .col-2, which is most likely not what you wanted.
  • If you do the CSS calculations manually, you may see why it wouldn't make sense for it to work as each level of col-# is just having a different width specified. If you're trying to utilize that to have helper classes that determine the width of a set column, that's alright, but don't forget that these are all still block level elements which means that they won't be floating next to each other. If you wish to achieve that, look into displaying them using flex rules or maybe setting them to display: table-cell, or even utilizing floats and or CSS positioning. As it stands now however, your columns will just stack on top of each other like the block level elements that they are.
.col-1{
    width: 8.333%;    /* calc(100% / 12) */
}

.col-2 {
    width: 16.666%;  /* calc(100% / 12 *2) */
}

.col-3 { 
    width: 24.999%; /*calc(100% / 12 * 3) */
}

.col-4 {
    width: 33.332%; /* calc(100% / 12 * 4) */
}

.col-5 {
    width: 41.665%; /* calc(100% / 12 * 5) */
}