Tribute page problem:((

Tell us what’s happening:

hi, i have no idea whats wrong with my code. text is in my national language-polish. could You please help me and show me whats wrong? thanks

Your code so far

        <html>
  <div id="main">
    <h1 id="title">Tribute to karaluszki</h1>
    <h3>Kraluszki są zajebiste</h3>
    <div id="img-div">
     <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/5/59/Blatta_orientalis_cdc_2.jpg" alt="karaluszek"></img>
    <p id="img-caption">To jest karaluszek bo o karaluszkach mowa</p>
  </div>
  <p id="tribute-info">
    Karaluch, karaczan wschodni (Blatta orientalis) – gatunek owada z rzędu karaczanów i rodziny karaczanowatych. Owad kosmopolityczny, w większości zasięgu synantropijny. </p>
  <a id="tribute-link" href="https://pl.wikipedia.org/wiki/Karaluch" target="_blank">Tutaj więcej informacji o karaluszkach</a>
  </div>
</html>

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

do you maybe have it in a pen with the test suite? it would be easier to debug

image
is that what You meant?

Hi! :slight_smile: The actual link to your project on CodePen would be a bit more helpful than the screenshot :sweat_smile: I have tried pasting the HTML code that you gave us in a new pen, and the only two tests that you’re failing both have to do with styling. Do you have any CSS code yet?

yes i have changed picture width to 900px and centered the text as well as changed background color

OK, I see :slight_smile: So, the first problem is that the image should responsively resize, which means that its width should change with screen size. If you just put width: 900px;, it will always be 900px, so if I look at your page on mobile, I’ll have to scroll left and right to see the whole image. Instead, the image should get smaller so that I can see it without scrolling on any device and screen size. You can achieve this with relative measurements (for example, percentages). So, if you put width: 50%;, the width of that element will always be 50% of the width of its parent element, regardless of the screen size, which means that its size will adjust to the width of the screen.

Now, this test in particular asks that you use max-width property, which is basically used to indicate the maximum size that an element can reach. Once you set this property, you’ll still fail this test because you need to set the image’s display property to block.

When you do this, however, you’ll see that you’re failing the other test that asks you to center the image. This is because text-align doesn’t work on block elements. So, try to figure out another way to center the image (hint: it has to do with the margin property) and if you get stuck, feel free to ask for help :slight_smile:

Hope this helps and good luck! :smiley:

1 Like

thank You so much, i’ll keep You informed about my progress

even though i’ve changed img width to 80% and set margin to 10%, it still shows that only one aspect is correct and the rest is wrong. You could see only 2 mistakes in my code so i have no idea whats going on

I would be happy to help you, but again, this screenshot isn’t really helpful :sweat_smile: I can see that you haven’t changed your code on CodePen (other than adding a JS line, which doesn’t really affect any of these tests). In order to make this a bit easier for us, could I bother you to do two things? First, make all the changes directly in CodePen on the link that you’ve provided above. That way, we’ll be able to see your code, it’s going to be rendered nicely so that we can test it, and we’ll be able to see what you’ve tried and give you helpful tips. :slight_smile: And secondly, keep the test suite in your code so that you (and we) can see which tests you’re failing and whether you’ve managed to fix the issues (to implement the test suite, just copy this line: <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>, and paste it at the beginning of your HTML section in CodePen).

(Oh and by the way, if you’re replying to one of my posts directly and want me to clarify something I’ve said, please hit the transparent “Reply” button at the bottom right of my post and not the blue “Reply” button so that I can get a notification about your response. This was just pure luck that I saw there were new comments on this thread :sweat_smile: )

So, please do these things that I’ve asked you to do, and then I or anyone else on the forum will be in a much better position to help you :slight_smile:

1 Like

it’s worked! Thank You so much :slight_smile: I wouldn’t be able to complete this task without Your help :blush:
https://codepen.io/hubert-ulanowski/pen/ZEYBeNN#= -here’s my working code :slight_smile: once again thank You so much :slight_smile:

1 Like

Yeah, that looks much better :slight_smile: I’m glad you got it to work and good luck going forward :smiley: