CSS CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

Daniel Kong
Daniel Kong
5,813 Points

.icon-location not affected by the css rule

I'm following the step in video. But the following css rule unable to resize and positioning the location icon.

.icon-location { width: 35px; position: absolute; top: -15px; left: -15px; }

Am I missed anything? Please help, thanks.

Daniel Kong
Daniel Kong
5,813 Points

I tried to put ".icon-location { width: 35px; position: absolute; top: -15px; left: -15px; }" in different position in style.css and I finally solved the problem. I found out that the rule above .icon-location is missing a " } ". XD

like this:

.headline { margin-bottom: 0;

.icon-location { width: 35px; position: absolute; top: -15px; left: -15px; }

Thank you for all your kind assistance.

Steven Parker
Steven Parker
203,728 Points

This is a perfect example of why it's important to share ALL the code, since the error was on a different line.

3 Answers

Steven Parker
Steven Parker
203,728 Points

This CSS looks good. The problem may be in some of the other code.

It can be hard to see the issue without the complete project, particularly when images are involved. You can share everything at once if you make a snapshot of your workspace and provide the link to it.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 87,022 Points

Hi Daniel,

When positioning elements with absolute positioning it positions them in a position relative it a "position context" which is either the root element or the parent element with a position value of "relative"; so in other words it's a position relative to it;s parent element.

Try setting the direct parent element above your element with the class of icon-location with a position property of relative.

Jelmer Rodenburg
Jelmer Rodenburg
10,081 Points

My CSS has no effect on the location image what so ever. Even when I copied the finished project file and replaced the CSS I typed the location image still remains the same size. Snapshot of the CSS: https://w.trhou.se/vr0iixfwod. The stylesheet is still linked to the html file. I tested by changing the bg color.

Thanks in advance.