Tribute Page - Build a Tribute Page

Full screen fit

I’m trying to fit my content on one page but I’m unable to.

 **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Tribute Page</title>
</head>
<body>

    <main id="main">

        <header>
            <h1 id="title">Ngai the Divider of the Universe and Lord of Nature</h1>
            <p>Ngai is the creator and giver of all things</p>
        </header>

       
        <div id="img-div">
            <img src="https://cdna.artstation.com/p/assets/images/images/043/144/000/large/oleg-bozhko-render-1.jpg?1636442064" alt="" id="image">
            <figcaption id="img-caption"><a id="tribute-link" target="_blank" href="https://theculturetrip.com/africa/articles/11-enchanting-mythological-figures-across-africa/">Kere-Nyaga</a>(Mount Kenya) is where Ngai likes to spend most of his time, and the foothills of the snow-capped mountain is also where locals assemble in the shade of trees to pray</figcaption>
        </div>    
        

        <div id="tribute-info">
            <h2>Ngai</h2>
            <p>Ngai (other names: Múrungu or Enkai ) is the monolithic Supreme God in the spirituality of the Kikuyu (or Gikuyu) and the closely related Embu, Meru and Kamba groups of Kenya, and the Maasai of Kenya and Tanzania.</p>
        </div>

    </main>
    
</body>
</html>
/* file: styles.css */
* {
    box-sizing: border-box;
    font-size: 10px;
    margin: 0;
    padding: 0;
}


#main {
    background-color: #E9E7E5;
    padding: 2rem;
}

img {
    display: block;
}

h1, p {
   text-align: center;
   color: #6A635C;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

p {
    margin-top: 0.5rem;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

#img-div {
    background-color: #AAA49D;
    padding: 3rem;
}

#image {
    max-width: 100%;
    height: auto;
    max-height: 100vh;
    margin:0 auto;
    display: block;
    justify-content: center;
    align-items: center;
}

#img-caption, #tribute-link {
    font-size: 2rem;
    margin-top: 2rem;
}

h2 {
    text-align: center;
    font-size: 4rem;
    color: #6A635C;
    padding: 1rem;
}

#img-caption{
    width: 56.5%;
    margin: 0 auto;
    padding-top:2rem;
}



 **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 OPR/89.0.4447.83

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

hello and welcome to fcc forum :slight_smile:

i tried this code and this is how it looks like on browser

what exactly isn’t as per your expectation in here?! also try to include some kind of sandbox environments such as (codepen/repl/etc.), it get easier to get help that way

happy learning :slight_smile:

Hi, Apologies. I’ve updated my code. Can you please try and run it now?

what is it that you’re expecting in this?

currently “image” is taking up its original (source image dimension) size, thats what is making this enlarged on browser

So basically I wanted the image and the info below to show on one page without scrolling down. But i see that its because of the image 100% width.

yeah :slight_smile:

try different image dimension or use css to change that…