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

Posted by Danielle M
Danielle M
2,818 Points

When I preview my website, the photo I added shows up WAY too big!

Okay, so, when I preview my website the picture I imported shows up WAY bigger than it's supposed to! I don't think I changed any of the image settings, and I know it started happening after I imported my font (which is the same font used in the video for simplicity). Has anyone else had this problem? If so, how did you fix it?

This is my code:

''' <!-- Be sure to change EVERYTHING on this page to make it your own! :) --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All About Danielle</title> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> </head>
<body> <img src="catherine.jpg" alt="Sweet baby">

<h1>Danielle</h1>

<style>h1{text-align:left; color:darkblue}</style>

<h2>Artist/ Web Dev-In-Training</h2>

<style>h2{text-align:left; color:lightblue}</style>

<h3>Alaska</h3>

<style>h4{text-align:left; color: lightgreen}</style>

  <h4>What I do:</h4>
     <p>I am an artist by trade, but I'm learning to code as well. So much fun!</p>

<h4>What I enjoy doing:</h4>  
  <p>I enjoy drawing and writing and playing video games!</p>

</body> </html>

'''

And my CSS:

'''

/*********************************************** Top bar color ***********************************************/

html { border-top: 100px solid #b3dd15; }

/*********************************************** Body styling ***********************************************/

body { max-width: 600px; margin: 0 auto; padding: 20px 20px; font-size: 1.3em; line-height: 1.6em; font-family: 'Oswald', sans-serif; color: #777; font-weight: 300; }

/*********************************************** Image styling ***********************************************/

img { border-radius: 200%; max-width: 100px; }

/*********************************************** Headline styling ***********************************************/ h1 { font-size: 1.5em; line-height: .5em; color: #564581; }

h2 { font-size: 1em; line-height: 1em; font-style: oblique; color: #aaa;

}

h3 { font-size: .875em; line-height: 1em; font-weight: normal; }

h4 { margin-top: 60px; font-weight: 500; color: #564581; }

'''

jag
jag
18,266 Points

Why are you including style tags for individual CSS styles for each tag?

hamcrjside
hamcrjside
4,599 Points

You don't seem to be linking to the external CSS where the img {max-width: 100px;} is being set.

My advice would be to keep all of your CSS in a single external file - i.e. remove it completely from the HTML file. It will be very difficult to scale and maintain styling with a mix of style element and tags in the HTML and and external CSS file as well. Just a thought.

Danielle M
Danielle M
2,818 Points

Thank you, everyone, for your help!

1 Answer

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

I notice a few things:

  • the closing </head> tag seems to be missing
  • there should not be any HTML in the head area
  • styles are fine in the head area, but they could all share just one <style> element
  • the external CSS doesn't seem to be included (as Eliana mentioned)

Eliana's other advice is also sound, since you have an external CSS file already, it's good practice to put all the styles there.