Image doesn’t resize to the viewport

[Mikael3211]

A few days ago, while I was practicing my html and css skills, I found a small problem in my tribute page project . The image didn’t resize to the viewport. Please tell how I can solve this problem, thank you.

rNGQNpv

[ArielLeslie]

Can you share a link to your project and describe what you’ve tried so far and what problems you’ve run into?

[Mikael3211]

rNGQNpv

[LucLH]

Hi @Mikael3211,

You have many possibilities. You can decide to give your image a relative size, or you can keep the fixed size and then with the media query apply a relative size to your image. Your image is not resizing just because you just applied it a fixed size:

#imgage {
  max-width:none;
  width:300px;
}

After, if you mean just that the image didn’t resize with your CSS property, the id you try to reach is wrongly spelled.
CSS: #imgage
HTML: id="image"

[Mikael3211]

I am confused. Please tell me how I can fix these two problems.

[LucLH]

I already told you the answer kind of way. If your issue is because your image didn’t resize it is because of your spelling.

Your HTML:

<!-- the id of your img tag is: image -->
<img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaAke6TKvUHj7HRHEitKi93iwyxFjXBSzUFmPN-PRk58FED2uTOUwkG9o&s=10">

Your CSS:

/* The id your are targeting is: imgage. Different then than your HTML id */ 
#imgage {
  max-width:none;
  width:300px;
}

Now, if you want that the image be responsive, then reduce its size according to the size page, you have to use a different type of units for your image such as % for example. Or you can decide to keep the px unit and apply a rule to your media query. Let’s use your code:

#imgage {
  max-width:none;
  width:300px;
}

@media(max-width:400px) {
  #imgage {
    width: 150px;
    /* or */
    width: 75%;
  }
}

I gave you examples, you can use whatever you want. If you don’t understand the difference between fixed and relative values, maybe watch again the courses about it.