Need help with tribute page last two challenge

HTML-CSS
1

I need help with those two challenge from Build a tribute page

User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

User Story #9: The img element should be centred within its parent element.

So here is what I’ve tried so far

  1. I tried to change this line here

    .mySlides { max-width: 100%; height: auto; }

to this

`.mySlides {
max-width: 100%;
height: auto;
display: block;
}`

so after this attempt it did complete the challenge #9 both my image was now going over everything

  1. I tried also this code

    .mySlides { max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }

still came up with nothing this didn’t make also any change to the page

and lastly I tried to change this

`.mySlides {
max-width: 100%;
height: auto;
margin 0 auto;
}`

same result as the second attempt

if you guys could just give me a hint not the solution just pointing me in the right direction, so I’ll be able to learn

thanks,
Maurice

here my code pen link: https://codepen.io/mauricefhebert/pen/QWdPKav

here is my GitHub link: GitHub - mauricefhebert/Build-a-Tribute-Page

2

Hi @mauricefhebert !

Welcome to the forum!

Always keep the test suite in your page.
It will help people test your code as they look for a solution like I did.

The test is looking for the img with the id of #image to be centered and responsive.

You need to create a selector in your css

#image {
//add the max-width,display, etc in here
}

That will get you 9/10.

In order to pass the last test, you will need to remove the display:flex; from your #img-div selector.

Then you should see 10/10.

Hope that helps!

1 Like
3

Thanks you’re amazing!

4

Only one problem now my image is taking the whole page

5

You can resize the image using the width and height properties.

I see you have made a lot of changes and I not sure why you have the same content displaying twice.

It is creating a lot of html errors.
As you are building this out, make sure to run your code through the html validator

6

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