Need help regarding the First project (Tribute Page) under HTML in fcc)

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

How do I pass this test case? i applied media query as follows -
@media (min-width: 630px) {
#img-div {
background-color: #536e65;
margin: 0;
margin-top: -1.55em;
padding-top: 1em;
text-align: center;
}
#img-div #image {
max-width: auto;
margin: 0 0 0 0;
height: 10%;
border-radius: 50%;

and general CSS as follows -
#img-div {
margin-top: -1.55em;
padding-top: 2em;
display: block;
text-align: center;
background-color: #536e65;
margin-left: 0;
margin-right: 0;
}

#img-div #image {
border-radius: 50%;
max-width: 60%;
margin-left: -3em;
margin-right: -1.6em;

I tried using both width and max-width properties but its failing the test case again and again. I need help :frowning:

link to my pen on the project - https://codepen.io/no_procrastination/pen/mdqBxwM

img {
  max-width: 100%;
}

Hi! You have to work with the img element as mentioned in the task .

Hello @harshita-dutta,

Do you have a link to your project? Just to apply the theory I have. If not, what I see is that you never gave a responsive size to your image.

#img-div #image {
  border-radius: 50%; /* You give a radius of 50%, ok */
  max-width: 60%; /* You give a max-width of 60%, ok */
  margin-left: -3em;
  margin-right: -1.6em;
}

In that part, you give a max-width property, but your image will never change its size because you didn’t apply any change for it. You have to transform it into a responsive image, so what you can do for example is to use the width property.

#img-div #image {
  /* Your code */
  width: 60%;
  max-width: 60%;
}

60% is just an example according to what you used for the max-width property, you can decrease or increase the value as you wish. This value and this unit will transform your image in something responsive because you gave it a relative unit, and not a fixed one. Having this property will then apply the max-width property with the value of 60% which means that no matter the screen size of the user, it will be with a maximum of 60% of its original fixed size. You can also use the min-width property if you don’t want your image be too small at a certain point.

Hi @LucLH ,
Thank you for the reply.
I tried out your theory but the test case still ain’t passing.
Here’s the link to the pen created by me - https://codepen.io/no_procrastination/pen/mdqBxwM

Hi @arcismd ,
Thank you for the reply.
I tried “max-width: 100%”, but then the image alignment changes and it fails one more test case where the image has to be placed at the centre of its block.
Please check out the pen I created for the project once, link shared on the post (edited).

Ok I checked a little bit. I checked the log it says: Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'.

So i added the property/value to the code:

#img-div #image {
  display: block;
  width: auto;
  border-radius: 50%;
  max-width: 60%;
  margin: auto;
}

I changed also the margin value to auto, like this it center the image. Until here, the code is good. What gives trouble now is your media query. You used min-width: 630px. It means greater than or equal to 630px, which means that the media query will be applied on a screen greater or equal to 630px. On mobile device it will not be applied but on computer yes. Then you need to use min-width query. And then you will fix your issues :slight_smile:

2 Likes

This is the best option, above.

2 Likes

Thankyou very much! :smiley_cat:

1 Like

You’re welcome @harshita-dutta, good luck in your projects.

1 Like

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