HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Desmond Dallas
Desmond Dallas
6,985 Points

Aligning image

Hi, hope someone can spot the fault.

  1. On the about page when resizing the page to mobile device the image should appear at the top above text however the stays on the lef- hand side. I've looked over the code and cannot find where I have gone wrong.

  2. I've noticed (video: Adjust the Profile Page and Header) that in the video they are styling the image in the responsive.css file. When I do so nothing is happening however when I do the styling in the main.css file it works.

<!-- when using own images it is best to use the following sizes:
width: 1024px & height: 768px -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One:400,400i|Open+Sans:400,700,700i,800" rel="stylesheet"><!-- make sure pasted below normalize css and above main.css -->
    <link rel="stylesheet" href="css/main.css">
  </head>

  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>

      <nav>
        <ul>
          <li><a href="index.html">Portfolio</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><!-- try use image 200px in height and width--->
        <img src="img/nick.jpg" alt="Photograph of Nick Petit" class="profile-photo">
        <h3>About</h3>
        <p>Code To Program</p>
        <p>Helping small and larger businesses build there online presence</p>
        <p>Facebook: <a href="http://facebook.com/CodeToProgram/">wtp@webdesign@gmail.com</a></p>
      </section>

      <footer>
        <a href="http://<img facebook.com/CodeToProgram/"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://<img facebook.com/CodeToProgram/"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div> <!-- wrapper closed -->
  </body> 
</html>
responsive.css
@media screen and (min-width: 480px) {  /* should be 480px bu didnt work */

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

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

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


/*******************************
3 * 2.5 + 2.5 = 15
100% - 15% = 85%
85 / 3 = 28.33333333 (repeating)
*******************************/

/*******************************
PAGE: PORTFOLIO
*******************************/

#gallery li {
    width: 28.3333%;
}

#gallery li:nth-child(4n) { /* clears every 4th item insode the gallery to align properly */
    clear: left;
}



@media screen and (min-width: 660px) {

}   
about.html
<!-- when using own images it is best to use the following sizes:
width: 1024px & height: 768px -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One:400,400i|Open+Sans:400,700,700i,800" rel="stylesheet"><!-- make sure pasted below normalize css and above main.css -->
    <link rel="stylesheet" href="css/main.css">
  </head>

  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>

      <nav>
        <ul>
          <li><a href="index.html">Portfolio</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><!-- try use image 200px in height and width--->
        <img src="img/nick.jpg" alt="Photograph of Nick Petit" class="profile-photo">
        <h3>About</h3>
        <p>Code To Program</p>
        <p>Helping small and larger businesses build there online presence</p>
        <p>Facebook: <a href="http://facebook.com/CodeToProgram/">wtp@webdesign@gmail.com</a></p>
      </section>

      <footer>
        <a href="http://<img facebook.com/CodeToProgram/"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://<img facebook.com/CodeToProgram/"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div> <!-- wrapper closed -->
  </body> 
</html>
main.css
/******************
GENERAL 
*******************/



body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto; /* 0 sets top & bottom. auto sets left & right automatically*/
  padding: 0 5%;
}


/* removes underlines under links */
a {
  text-decoration: none;
}

/*stops images from breaking outside container */
img {
max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}



/*******************************
HEADING
*******************************/

header {
  float: left;
  margin: 0 0 30px 0; /*top right bottom left*/
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0; /* top, left & right, bottom margin */
  font-weight: normal;
}



/****************************
NAVIGATION
****************************/



nav {
  text-align: center;
  padding: 10px;
  margin 20px 0 0;
}

nav ul {
  list-style: none; 
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/****************************
FOOTER
****************************/



footer {
  font-size: 0.75em;
  text-align: center;
  clear: both; /* this stops the footer from aligning like the images */
  padding-top: 50px;
  color: #ccc;
}

/* for high resolution. always resize after you have link. This way it will keep the high resolution. Do not resize first.*/
.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/****************************
PAGE: PORTFOLIO this section is to align images side by side
****************************/



#gallery {
  margin: 0;
  padding: 0;
  list-style: none; /*removes bullet point from list */
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7; /* text color set to grey. Will not see unless captions are unlinked from Google Fonts*/
}

#gallery li a p { /* targets text in the gallery */
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



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



.profile-photo {
  display: block; /*this will allow to use auto margins (as below) to center the element on the page. */
  max-width: 150px;
  margin: 0 auto 30px; /*margin auto will help center image on the page */
  border-radius: 100%;
  float: left;
  margin: 0 5% 80px 0;
}




/*******************************
PAGE: CONTACT
*******************************/


.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}




/*******************************
COLORS
*******************************/



/* site body */
body {
  background-color: #fff;
  color: #999; /*text color*/
}
/* site body */


/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}


/* nav background on mobile devices */
nav {
  background: #599a68;
}


/* logo text */
h1, h2 {
  color: #fff;
}


/*links */
a {
  color: #6ab47b;
}



nav a, nav a:visited { /*link stays white when visited*/
  color: #fff;
}


nav a.selected, nav a:hover { /*Portfolio selected to be green also hover effect on other nav elements */
  color: #32673f;
}

MOD: I added formatting to the code so it'll be way easier for people to read through and be able to help you out. Also you had the about page listed as CSS but it contains HTML code so hopefully that was a typo - I labeled it as about.html (feel free to correct it if that was wrong!). Anyway, see the Markdown Cheatsheet below the textbox when you're entering a question, for info on how to format the code. Thanks! :-)

Steven Parker
Steven Parker
172,047 Points

A better way to share large and/or multiple files is to make a snapshot of your workspace and post the link to it here. It makes it much easier to replicate your issue and give you an accurate answer.

Desmond Dallas
Desmond Dallas
6,985 Points

Wonderful, thanks for your help

1 Answer

It looks like you forgot to add the responsive.css style link tag within your head tag in your html. It should be placed above your main.css link tag as shown below.

<head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One:400,400i|Open+Sans:400,700,700i,800" rel="stylesheet"><!-- make sure pasted below normalize css and above main.css --> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/main.css"> </head>

In addition, it's important to note that the last css stylesheet listed within your header tag will override any conflicting styles that are in css files above it so if you need to have styles applied and they are not being appearing, try to comment out your main.css link and see if the styles work. If they do, that means your css was not being applied because it was overwritten. In order to have the styles applied, you need to add them to your main.css file.

Hope that helps!