Help with responsive CSS edits on About Page.

Just checked your workspace. The images won't show because you're referencing the img folder, but the folder is actually Img.

Also, double check where you use the IDs that the responsive CSS is using. I think I saw them on the contact HTML but not on the index HTML.

Steven,

In response to your other question about not seeing the css changes you made for the img element,

I noticed in your HTML you have:

<img src="Img/nick.jpg" alt="Photograph of Nick Petitt" class"profile-photo">

If you look at, ' class"profile-photo" ' , you'll notice you don't have the '=' after 'class'. This is causing an error, which is not allowing your css selector to add styling to that element.

Your code should look like mine below:

<img src="Img/nick.jpg" alt="Photograph of Nick Petitt" class="profile-photo">

Let me know if this helps. :)

Hello Steven,

I'm having a hard time visualizing what exactly you're trying to do, but from your explanation above I was able to code up something that might look similar to what you're doing.

This may not be something that you've covered in your lessons yet so It might look new to you. If you haven't seen it before and it overwhelms you a bit, don't worry, you will figure learn about it in future lessons.

What I did below was wrap your content inside of the section in their own divs so I can move them around.

<div class="left">
        <img src="Img/nick.jpg" alt="Photograph of Nick Petitt" class="profile-photo">
</div>

<div class="right">
        <h3>About</h3>
        <p> 
              Hi I am Steven McNeil and this is my web design portfolio. When I am not designing websites I am running a blog named STL Hat Trick and spending time with my family.
        </p>
        <p>
              If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/smcneil_87">@SMcNeil_87</a>
        </p>
</div> 

As you can see, I gave both of the 'div' elements their own class names so I can add styling to them and move them around like puzzle pieces.

Below is the CSS I used to make the 'left' div, which wraps the image, float to the left, and the 'right' div, which wraps your content, to the right.

/****************************
Testing
*****************************/

.left {
  float: left;
  width: 40%;
}

.right {
  float: right;
  width: 60%;
}

@media screen and (max-width: 700px) {
   .left {
    float: none;
    width: 100%;
  }

  .right {
    float: none;
    width: 100%;
  }
}

Specifying the width of the boxes when they're floated allows you to position the boxes on the same line. I also set a media query at a 700px breakpoint to remove the floats for mobile so that the boxes stack on top of each other.

Try this out and play around with it, and let me know if this is what you were aiming for, and like I said, if this is too much info right now, don't worry. Play around with it and try and do some cool stuff.