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 David Moyle
David Moyle
2,713 Points

Can't get image to scale down in Responsive CSS

I was following along w/ Nick Pettit's "How To Build A Website," but substituting my own images etc. for his (in Workspace). Anyhow, when I shrink my "About" page, the image I chose doesn't shrink accordingly. I'm a newbie, hence lost. I've copied a bit of the Responsive CSS below. Hope it's enough to clue y'all in on my failings. Thanks in advance!

.profile-photo { max-width: 100%; height: auto; float: left; margin: 0 5% 80px 0; }

10 Answers

Joe Consterdine
Joe Consterdine
13,965 Points

Hi David,

I copied your code. I changed your 'magicghost.jpg' image to one of my own because obviously I don't have that image on my computer and the image scaled fine using the '.profile-photo' class.

A few questions:

  1. Is the rest of your styles working as you wanted? Is it just this image that isn't scaling down responsively?
  2. Is your 'main.css' file definitely in a folder called 'css'.
  3. What is 'responsive.css'? Is there code inside that? If so what code is in that file?

Let me know and I'll try again, but that works fine for me.

thanks Joe

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi David,

I've tidied up your code because it's difficult to read.

If you could add your HTML aswell so I can find the solution for you.

/************* TWO-COLUMN LAYOUT **************/ 

#primary { width: 50%; float: left;}

#secondary { width: 40%; float: right; }

/************* PORTFOLIO **************/ 

#gallery li { width: 28.3333%; }
#gallery li:nth-child(4n) { clear: left; }

/****************
PAGE: ABOUT *****************/

.profile-photo { max-width: 100%;
 height: auto; 
float: left; 
margin: 0 5% 80px 0; 
}
/************* HEADER **************/ 

nav { background: none; 
float: right; 
font-size: 1.125em; 
margin-right: 5%; 
text-align: right; 
width: 45%; 
}

#logo {
  float: left;
  margin-left: 5%;
  text-align: left;
  width: 45%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 0.825em;
  margin-bottom: 20px;
}

header {
  border-bottom: 5px solid #D8F781;
  margin-bottom: 60px;
}
Dan Weru
Dan Weru
48,030 Points
Dan Weru
Dan Weru
48,030 Points

Hey, check you html code to confirm that the class/ id name matches with the one you have used in your css file.... for example the if the image tag in your html reads as <img class = "logo"> then your css ought to be .logo{ width: 45%;} ... otherwise if it reads <img id = "logo"> your css should read #logo{ width:45%;}

David Moyle
David Moyle
2,713 Points
David Moyle
David Moyle
2,713 Points

Thanks, guys. ... Dan, it's my Profile Photo in /* PAGE: ABOUT */ that's not scaling, if that helps. ... & Dan, thanks for tidying up my post. I'd post the HTML here, as you requested, but I'm not sure how. (See how doomed I am? I can't even figure out how to post readable code in this forum. ;-)

Joe Consterdine
Joe Consterdine
13,965 Points

Hi Dan,

just post it and I'll make it look better.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi David,

I meant copy and paste the actual code including all the tags etc.

Cheers :)

David Moyle
David Moyle
2,713 Points
David Moyle
David Moyle
2,713 Points

All right, Joe. Here you go. (It's just the relevant bit, I think.) 

<img src="img/magicghost.jpg" alt="test pic" class="profile-photo">
Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi David,

can you send it all?

try taking the float off .profile-photo.

David Moyle
David Moyle
2,713 Points
David Moyle
David Moyle
2,713 Points

I took the float off, but it didn't help. I've attached the HTML below. (Correctly, I hope.) Thanks for the patient help.

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ghost Telegram</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>DESIGNER</h1>
        <h2>Heading 2</h2>
       </a>
      <nav>
        <ul>
          <li><a href="index.html">Index</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/magicghost.jpg" alt="Ghost Magic and Telegram, The Gathering" class="profile-photo">
        <h3>Heading 3</h3>
         <p>Test(<i>test</i>):</p>
         <p><a href="http://twitter.com/GHOST_TELEGRAM">@GHOST_TELEGRAM</a>.</p>
         <p>&nbsp;</p>
        <h3><i>test</i></h3>
      </section>
      <footer>
        <a href="http://twitter.com/ghost_telegram"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p>&copy; 2015 DRM</p>  
      </footer> 
     </div>
  </body>
</html>
David Moyle
David Moyle
2,713 Points
David Moyle
David Moyle
2,713 Points

Hi Joe,

You've gone beyond the call of duty in assisting me, a random stranger, so assiduously. As a result, I've solved my little problem: I had the max-width set to 100% in my Responsive CSS tab, but not in my CSS tab. Setting them both to 100% solved the problem. You're the best!

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

That's great!

Anytime :)