Make an image responsive, help me

I can’t make my image responsive even if I used the code:

img {
max-width: 100%;
max-height: auto;
}

I used atom and created separate files of HTML and CSS. All other CSS commands work except for the responsive part. Please help.

1 Like

is it about not passing the test? what’s the error below the test?

or it’s a functional issue?

can you share your live project?
if use repl.it, you can have the same file structure you have in your local environment. (you will need to anyway, you need a live version of your project to submit)

1 Like

@ieahleen I am really confused, my image is responsive in codepen but not in atom. The same codes are used. Why :sleepy: Here is my random project:

Hey @DavidLacsao. I think this part of your code is wrong:

Hope this helps.

1 Like

@paulsonstech thanks for telling but I think I’m pretty sure I wrote in the img “height: auto” and not “max-height: auto”. If you would check again thanks.

1 Like

But the code you provided in the top has max-height!

1 Like

It’s almost impossible to troubleshoot why something isn’t working locally for you as we do not have access to your system.

In the Codepen you have different CSS than what you posted here. You are also using a class selector, so make sure your image element has the img class if that is what you are using for the selector in the CSS.

1 Like

I am talking about the code you provided on this topic in post 1.

1 Like

@paulsonstech I know I forgot sorry again

1 Like

That means your problem is solved?

1 Like

@lasjorg thanks for the comment but the img class stuff is not really my main problem. I think your right that it’s hard to find the problem because I am working on it locally. Guess I’ll have to figure it out on my own

@paulsonstech actually no, my problem is my image is responsive in codepen but not on my software atom when I post it on my web page. Every code is literally the same in codepen and atom, I just can’t find out why.

Thank you so much guys for your comments and suggestion. I think I’ll just work out this problem on my own hoping I could find the answer lol. Wish me good luck on my programming journey, thanks.

In Chrome, right click the image and use Inspect from the menu, check that the styles are actually being applied to the image. If they are not you will have to figure out what is wrong (like an incorrect selector for example).

1 Like

@lasjorg oh okay thanks, I think I’ll just try this tomorrow because I am a bit sleepy now, I’ll just update you of my progress about this. Thanks.

Hey @lasjorg thank you for this, I think I already solved the problem, just gotta have to make a few adjustments. Thanks for your help :slightly_smiling_face:

img{
object-fit: contain;
width: 100%;
height: auto;
}

did you link css in head section `

<link href="" rel="stylesheet">
1 Like