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 Create an Image Caption with Absolute Positioning

Posted by Palash Tiwari
Palash Tiwari
8,050 Points

image of location icon is coming too big ? 536x536

HTML trying to place location icon but the image is coming way too big on the screen .

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Hey Palash, if you share your code it would be much easier to help out. You can copy and paste it in to this post (refer to the markdown cheatsheet for how to wrap your code so it's easy to read). If it's a lot of code or if it would be useful for us to see the whole workspace then I recommend sharing a workspace snapshot. Check out this helpful video by Nick on how to create and share snapshots, starting at 1:33. For this issue we'll need to see both the relevant HTML and CSS for the image.

3 Answers

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

It looks like you've got a typo in the selector.

Correct the spelling of .icon-loaction to .icon-location and you should be good to go, assuming there aren't any errors in the HTML.

Palash Tiwari
Palash Tiwari
8,050 Points
Palash Tiwari
Palash Tiwari
8,050 Points

CSS

/* ================================= 
  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-loaction {
  width: 35px;
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 2;

}

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

@media (min-width: 769px) {

.main-header {
position: fixed;
background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  width: 100%;
  top: 0;
  z-index: 1000;
}

body {
padding-top: 60px;
}

    .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%;
    }

}

MOD EDIT: Added markdown for code readability. Please view the "markdown cheatsheet" linked below the comment box to see how to wrap your code for the forum.

Palash Tiwari
Palash Tiwari
8,050 Points
Palash Tiwari
Palash Tiwari
8,050 Points

thanks