Tribute Page Troubles

HTML-CSS
1

Hello! Unfortunately I am struggling a bit at the end of this project. I am using Chrome as a browser and am running into some issues; I think I have things coded correctly but am getting errors on 3 user stories when I test. Code and screenshots:

So, the page says my #image element needs to include {max-width: 100%, display: block} and should be centered in the parent element. Here is my CSS.

Untitled 2
Any idea what I’m doing wrong? I feel like I’ve tried so many variations to try to push the rudiments through this thing, of course I’d also prefer to make it look nice but I want to finish the main requirements first. TIA!

2

Here is the user test error, also.
FCC Tribute Page User Story Problems

3

HI @praxis.rings !

Welcome to the forum!

Did you link your css stylesheet to the html document like mentioned in the directions?

Also, it is best to write code directly into the forum instead of posting pictures. :+1:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

Hi!

Thank you for the quick response. I did link css stylesheet (or at least I think I did :upside_down_face:) I will try to implement the backticks, thanks for the tip!

Here is my full HTML code block:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css"></head>
    <body>
  <title>Yunnan, China</title>
   <h1 id="title">Yunnan, China</h1>
  <main id="main">
      <figure id="img-div">
        <img id="image"src="https://www.chinadaily.com.cn/travel/img/attachement/jpg/site1/20160920/448a5bd66cdc194ad9ef02.jpg"/>
          <figcaption id="img-caption"> <a href="https://www.chinadaily.com.cn/travel/2016-09/20/content_26837712_5.htm">Colorful rolling hills in Yunnan (photo by Enrico Barletta)</a></figcaption>       
<p id="tribute-info">Yunnan is province in Central China, home to a vast number of ethnic groups. It is the place of origin of prized pu'er and oolong teas, as well as other agricultural products.<p>
  <br>
  <p>Want to learn more about the history of this magical land? Click <a href=https://www.britannica.com/place/Yunnan>here.</a>
<a id="tribute-link" href="https://www.britannica.com/place/Yunnan"  target="_blank"></a>
</body>
</main>
</html>

CSS:

#image{

display: block;

max-width: 100%;

height: auto;

margin-left: auto; margin-right: auto; text-align: center;}

#img-div{text-align: center;}
5

I haven’t tested your code yet but I spotted this issue

You are using the incorrect file name.
You are missing a character.
Trying making that change and see if that works

6

Oops! The critical pluralizing “s” was missing. Oh my goodness thank you. That solved it.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.