Tribute Page, responsively resize img relative to parent element

Will it help if you set a fixed width on the #img-div? Like width: 600px; ??

The is kind of confusing, but once you see how it works, it should make sense.
On the #image element you have to first specify a max-width.

1st write. This will set a max width where the size of the image cannot exceed:
in my case it is,
max-width: 250px; <!-- This is my max-width, use your own -->

#image {
    max-width: 250px;
}

Next, you need to write a width that will conform to the parent container.

#image {
    max-width: 250px; 
    width: 100%;  <!-- will keep the shrink as the width of the page shrinks  -->
}

Then you have to display it as block, which just means that only the image can be on that line:
Final result:

#image {
    max-width: 250px; 
    width: 100%;
    display: block;
    margin: auto; <!-- center the image -->
}

And that’s it simple.

9 Likes

I know its a bit too late, but at least this will help someone,
in CSS:

img {
  max-width:100%;
  display:block;
  height:auto;
  margin: auto;
2 Likes

Hi everyone, I had the same issue with the last task and thanks to your answers I fixed it but another came over.
A big gap has appeared between <h1> and <h3>.
I’ve checked the code so many times, tried different ways, changed values but nothing happen.
I stuck, please help. https://codepen.io/Rallss/pen/ewzBOP

@Rally 404 no pen
begin filler text

Thanks twas a huge help!

Thank you soo much I was really stuck!

1 Like

thank you, margin-left and right was all I was missing (y)

1 Like

Worked perfectly…Thanks…

1 Like

Hey friends, learning to code using FCC! Im stuck on 1 failure as mentioned above. Can someone take a look and help why mine also gives me the same problem as above? Thanks, here’s my link

https://codepen.io/freeCodeCamp/pen/MJjpwO?editors=1100

@fmonjara, welcome to the forums. The link you provided only contains the test script. There’s no code. Make sure you’ve signed into codepen (and verified your email) so you can save any pens you create.

Summary of common little mistakes:

  1. this image resize should be nested inside the and the <img id=‘image’…> should be outside of it, nested inside the

1.Just in case, check that you are following the instructions literally. If you wrote id=‘img’ instead of ‘image’ (like the name in the instructions), the script that checks your solutions will mark it as wrong because first it will look for the id image, not for the img one.

2.i used this:
img
{
width: auto;
max-width: 100%;
height: auto;
display: block;
}

i wrote first the width:auto; because otherwise it would resize the image to 100% first, and then try to auto resize, which i think the script may qualify it as wrong because first it reads that the image width is 100%.

If non of this solutions worked for you, im sorry. The best advice i can give you is keep reading, but focus on following the instructions exactly but most of it: think like the script that is checking your answers and try to guess why it marked it as wrong (because maybe its right but you are getting it wrong at the same time)

If this worked for you, just ‘like’ this answer so more people can see it and use it.

3 Likes

Sorry here is my link. I was able to make some adjustments and it worked. But would enjoy getting some feedback to improve!

https://codepen.io/fmonjara/pen/rNVayaR, my fault. Got it to work. Can you add some feedback?

For feedback on your project please create a new topic in the ‘Project Feedback’ forum.

thank youuuuuuuuuuuu

1 Like

I recommend this instruction on design fundamentals:
https://scrimba.com/g/gdesign?utm_source=dev.to&utm_medium=referral&utm_campaign=gdesign_launch_article
You are centering everything on the page. which s mostly fine, but the <ul> should be centered which will leave the <li>s with a uniform left edge. You are centering each <li>. The <li>s also need more vertical space like a 1.5 line height. The blue link is a poor choice because of low contrast (It’s hard for me to see).

There is an unclosed block in the css and in the html style element there is a missing semicolon. Just curious, why did you decide to put css in both places?
Good start! Time to polish.

this really work, thanks.

wow! work perfectly for me you are a life saver

1 Like

Here is the link to my code s far please can you help? i tried what you suggested but it didn’t work for me. https://codepen.io/esromnic/pen/VwLgJXa