Image doesn’t resize to the viewport

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.

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

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"

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

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.

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