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 How to Make a Website Debugging HTML and CSS Problems How to Fix Problems with Code

Carleen Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points
Posted by Carleen Hall
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points

Head tags

I am getting the following error message when I ran my code through the validator. I tried changing the character “|” but it only seems to make everything worse. Could this also be the reason why my site is not responsive in chrome (it is staying the same size as the mobile device) but ok in other browsers? This is the only error I have in my code according to the validators (html and css)

Here is the error message from the validator: “Error: Bad value https://fonts.googleapis.com/css?family=Amiri:400,700|Cinzel+Decorative:700 for attribute href on element link: Illegal character in query: | is not allowed. From line 7, column 3; to line 7, column 124 e.css">↩ <link href="https://fonts.googleapis.com/css?family=Amiri:400,700|Cinzel+Decorative:700" rel='stylesheet' type='text/css'>↩ <li Syntax of URL: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20. Common non-alphanumeric characters other than ! $ & ' ( ) * + - . / : ; = ? @ _ ~ generally must be percent-encoded. For example, the pipe character (|) must be encoded as %7C.”

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Alicia Hall | Designer </title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Amiri:400,700|Cinzel+Decorative:700" 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>
          ```

6 Answers

egaratkaoroprat
egaratkaoroprat
16,630 Points
egaratkaoroprat
egaratkaoroprat
16,630 Points

Hi Carleen

You have to replace | with %7C (the pipe character | is encoded as %7C in a URL) and it should be fine. About the responsive design: Can you provide a snapshot of your workplace? The pipe character should not cause the problem, it might be somewhere else.

Carleen Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points
Carleen Hall
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points

Sorry for the delay. I did change the "|" but I still have the issue with chrome just as you said. Here is my responsive css

          <p>@media screen and (min-width: 480px) {


/****************************************
HEADER 
*****************************************/
header {
    border-bottom: 15px solid #999;
    margin-bottom: 60px; 
    }
/****************************************
TWO COLUM LAYOUT IN CONTACT PAGE 
*****************************************/

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

    }

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

    }
/****************************************
PROFILE PAGE 
*****************************************/

.rose {
    width: 1019%;
    margin: 0 auto;
    padding: 7%;
    background-color: #A10708;
    }




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

.profile-photo {
    float: left;
    margin: 0.5% 80px 0;
}

}


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


/****************************************
HEADER 
*****************************************/


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

 h1 {
     font-size: 3em;

 }

 h2 {
     font-size: 1em; 
     margin-bottom: 20px; 
     font-family: 'Cinzel Decorative', sans-serif;
 }

header {
    border-bottom: 10px solid #999;
    margin-bottom: 60px; 
}

/****************************************
PROFILE PAGE 
*****************************************/
.rose p {
    color: #7FDA89; 
    text-align: center;
    font-size: 30px;
    line-height: 1.5;

}

.rose {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 7% 5% 7%;
    background-color: #A10708;
    }


}






</p>
          ```
egaratkaoroprat
egaratkaoroprat
16,630 Points
egaratkaoroprat
egaratkaoroprat
16,630 Points

Where is this <p> tag coming from? Can you go to your workspace for this project and provide the snapshot link? You will find the snapshot button on the top right corner of your workspace where the fork and preview button is. This way I can have a look at all the files related to this project. The only odd thing I found is the declaration for the rose class which has the width of 1091%, but to understand that, I have to see the affected class container in your html file.

egaratkaoroprat
egaratkaoroprat
16,630 Points

You can just upload those files to your workspace :)

egaratkaoroprat
egaratkaoroprat
16,630 Points

Yeah, it works.

First of all, your code is well organized. It is easy to read and follow. :) Do you want to add the container with the class rose to all of your pages? It is responsive on my Chrome browser, it applied the changes from the media query. I noticed some positioning issues (container rose not being centered), so I made two changes and I hope it might be a little useful.

Changes:

  1. I applied the box-sizing to the general section in main.css.

    * {
box-sizing: border-box;
}

  2. Removed the padding in #wrapper

Although, there is a gap between rose and the header, you can get rid of it by removing the margin-bottom from your header in responsive.css.

I hope this information helps you to get a step closer to your desired solution.

Otherwise it might be better if we discuss this via chat or some other platform. I am eager to help you, as I it also helps me to retain the stuff I have learned. Feel free to hit me up on Facebook, there is no other with the same name. :)

Carleen Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points
Carleen Hall
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points

First of all, I want to thank you for that compliment. I just started coding 2 months ago so to hear even the smallest positive feedback is great.

I add the changes you suggested. However, the profile page in Chrome is static it not moving. Agree I will love to chat more about this.