Tribute page - make image responsive

HTML-CSS
1

Hello everyone! Thanks in advance for your time and help… My code so far:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>


<html>
 
<main id="main">

  <title id="title">Pedro Silveira</title>
  <div id="img-div" style="dive">
    <img src="https://regrasdoesporte.com.br/wp-content/forum/uploads/2013/04/tudo-sobre-surfe.jpg" style="imag" id="image" />
    <div id="img-caption">Waves are amazing!</div>
  </div>
  <div id="tribute-info"> I'm a student, surfer, musician, programming lover!
  </div>
  <a href="https://pt.wikipedia.org/wiki/Surfe" target="_blank" id="tribute-link">Information?, find yourself</a>
  </main>

CSS:




imag {
  width: 80%;
  height: 50%;
  align: center;
  top: 50%;
  left: 50%;
}
dive {
  max-width: 60px;
  height: 60px;
  
  
}
@media (max-width: 599px) {
  dive {
    width: 30px;
    height: 30px;
    align: center;
  }
}

I can’t get the last 2 tests done (image: responsive and centered)

Thanks and blessings
Pedro

2

try adding:

margin-left: auto;
margin-right: auto;
display: block;

to your image section

1 Like
3

Thank you. It didn’t work yet. :confused:

4

it’s v. hard to help further without access to your pen.
From what I can see there is no tag called “imag” in your html but your css selects this tag. So I would fix that to ‘img’ and try again.
Edit:
nevermind, i see that ‘imag’ is attached to your img in the style tag.

Will have to suggest again that you share your pen for further help.

5

Thank you and sorry for the confusion. Now it worked. :slight_smile: https://codepen.io/anon/pen/WyWEqR

1 Like