So I finally made the time to get the Tribute Page done, and it is screaming that the picture is not responsive. I’ve made this extremely simple, and mostly just hitting the requirements to move to the next step. What I keep getting though is:
Try using the “max-width” style property : expected ‘none’ to not equal ‘none’
AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal ‘none’
And this is the code:
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<main id="main">
<h2 id="title">Cyberpunk 2.0.2.0.</h2>
<div id="img-div">
<center><img id="image" src="https://www.airgdr.it/wp-content/uploads/2018/10/3299_cyberpunk-2077-prev-1.png"></center>
<figcaption id="img-caption">The Cyberpunk logo.
</figcaption>
</div>
<p id="tribute-info">Cyberpunk 2.0.2.0. is a futuristic role-playing game set in an alternate future.</p>
<p> To learn more about Cyberpunk 2.0.2.0. <a id="tribute-link" href="#" target="_blank">click here</a>.</p>
</main>
What am I missing in this? I’ve spent hours trying to figure this out.
I have moved your post to a more suitable sub-forum, and edited your post for readability. 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.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
@Bam92 It gives the exact same error. With the image needing to be responsive, and not grow beyond its max size, that code should work. It is the exact same code used in a prior challenge to make an image responsive and not exceed its original size. Along with all the hunting I did, I still come up with the exact same code that is in style.
So I am either the dumbest person ever, and just cannot see my error or something just may be wrong in the checks for this challenge. I just don’t know.
@Roma The help is truly appreciated Roma. I’ll make the needed changes for the next challenge. I’m still curious though as to why the picture refused to be responsive since the code was still CSS, and stuck inside style tags like all the other examples that had it working.
I really am trying to understand what I did wrong so I can learn from it.
With your code the way it was, all I did was move what was within the style tags into the CSS section and added the link to the tests. When running the tests I got an error and it said add display: block; so I did that and all tests pass.
When you clear one error there may be another that pops up. So if you add display: block; and run the code again you’ll see that your image still isn’t centered. To center an image you can set margin: auto;
Try these things step by step and you’ll see what I mean.
Btw, are you using codepen? If so, sometimes just saving a change isn’t enough. After clicking the save button, click the run button to ensure all changes have been picked up.
It’s making sense now. With the way that it is set up, the html code and css code have to be separated. I was operating under the belief that I could stick it all in one section and have it all run fine. I also get why the changes had to be made to img.
