Tribute page - make image responsive

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

<script src=""></script>

<main id="main">

  <title id="title">Pedro Silveira</title>
  <div id="img-div" style="dive">
    <img src="" style="imag" id="image" />
    <div id="img-caption">Waves are amazing!</div>
  <div id="tribute-info"> I'm a student, surfer, musician, programming lover!
  <a href="" target="_blank" id="tribute-link">Information?, find yourself</a>


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

try adding:

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

to your image section

1 Like

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

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.
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.

Thank you and sorry for the confusion. Now it worked. :slight_smile:

1 Like