Tribute page: #layout rule 1: error

HTML-CSS
1

Trying to complete the project section of HTML/CSS.
Getting an error on #Layout: Rule 1.

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

My code HTML:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js">--> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title id="title">Albert Einstein</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" async defer></script>
    </head>
    <body id="main">
        
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

            <figure id="img-div">
                <img src="https://media.nature.com/lw800/magazine-assets/d41586-018-05004-4/d41586-018-05004-4_15717082.jpg" alt="Albert Einstein image" id="image">
                <figcaption id="img-caption">Albert Einstein picture</figcaption>
            </figure>
                <section  id="tribute-info">
                    <p>Albert Einstein was a German-born theoretical physicist who developed the theory of relativity, one of
                    the two pillars of modern physics.<br> His work is also known for its influence on the philosophy of science.<br></p>
                    
                    
                    <a href="https://en.wikipedia.org/wiki/Albert_Einstein" id="tribute-link"
                    target="_blank" tabindex="0">Albert einstein wikipedia</a>
                </section>
       
    
            </body>
</html>

My code CSS:

body {
    display: block;
    text-align: center;
    position: absolute;
}


img {
    height: auto;
    max-width: 100%;
   
}

Changing img to position: absolute fixes the first error, but doesn’t align the image anymore. I’m at a loss…
What am I doing wrong?

2

If you have a Codepen please post the link.

I would suggest you read the lower half of the error message, it tells you more about what the test is expecting.

1 Like
3

Thanks for the tip! Got 10/10 but image is not centered haha.

EDIT: fixed it, had img to absolute and not parent div

SOLUTION:

body {



    text-align: center;

    position: absolute;

}

img {

    height: auto;

    max-width: 100%;

    display: block;

   

}
4

Not sure why you would need to use position absolute on the body? Generally speaking, that doesn’t seem like a great idea.

But if it’s passing and you are happy with the result, then I guess it doesn’t really matter.

1 Like
5

It had me confused too, but also annoyed that the other methods didn’t pass the test.